大家好！有很多关于 CSS 样式的提示和技巧。但不在本文中。今天我想谈谈如何更有效地使用 CSS，让你的平台更快！  1. 简单的选择器 CSS 有大量灵活的编码选项，您可以使用这些选项来定位 HTML 元素以进行样式设置。多年来，专家建议开发人员编写简单的选择器，以减少浏览器的负载并保持代码简洁明了。即使是最复杂的 CSS 选择器也需要几毫秒的时间来解析，但降低复杂性会减小文件大小并有助于浏览器解析 不要：   main > div.blog-section + article > * { /* Code here */ } 做：   .hero-image { /* Code here */ }  2.关键内联CSS 您可以内联关键的 CSS 规则。这通过以下方式提高了性能： 识别首屏元素使用的基本样式（页面加载时可见的样式） 将关键的 CSS 内联到 中的 标记中 <head> <style> 异步加载剩余的 CSS 以避免渲染阻塞。这可以通过以浏览器赋予较低优先级的“打印”样式加载样式表来完成。页面加载后，JavaScript 然后将其切换为“全部”媒体样式。   <style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style>  <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript>  3.避免 @import    at 规则允许任何 CSS 文件包含在另一个文件中。这似乎是加载较小组件和字体的合理方式。但事实并非如此。 @import   规则可以嵌套，因此浏览器必须依次加载和解析每个文件。 @import  HTML 中的多个 标记将并行加载 CSS 文件，这非常有效——尤其是在使用 HTTP/2 时。 <link> 不要：   /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css"); 做：   <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">  4. 预加载 CSS 文件 标签提供了一个可选的 preload 属性，可以立即开始下载，而不是等待 HTML 中的真正引用。 <link>    <link rel="preload" href="/css/main.css" as="style" />   <link rel="stylesheet" href="/css/main.css" />  5.渐进式渲染 不是使用单个站点范围的 CSS 文件，而是一种为单独的组件定义单独的样式表的技术。每个都在 HTML 中引用组件之前立即加载。 渐进式渲染 每个 仍然会阻塞渲染，但时间更短，因为文件更小。该页面可以更快地使用，因为每个组件都是按顺序呈现的；可以在加载剩余内容的同时查看页面顶部。 <link>   <head>  <link rel='stylesheet' href='base.css' /> </head> <body>  <link rel='stylesheet' href='header.css' /> <header>...</header>  <link rel='stylesheet' href='content.css' /> <main>  <link rel='stylesheet' href='form.css' /> <form>...</form> </main>  <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body>  6.使用媒体查询渲染 单个连接和缩小将使大多数站点受益，但需要大量较大屏幕样式的站点可以拆分 CSS 文件并使用媒体查询加载。    <link rel="stylesheet" href="core.css">  <link rel="stylesheet" media="(min-width: 40em)" href="40em.css">  <link rel="stylesheet" media="(min-width: 80em)" href="80em.css">  7. 采用 SVG 图像 可缩放矢量图形 (SVG) 通常用于徽标、图表、图标和更简单的图表。 SVG 不是像 JPG 和 PNG 位图那样定义每个像素的颜色，而是在 XML 中定义线条、矩形和圆形等形状。 更简单的 SVG 比同等位图小，可以无限缩放而不会丢失清晰度。 SVG 可以直接内联在 CSS 代码中作为背景图像。这对于较小的、可重复使用的图标来说是理想的，并且可以避免额外的 HTTP 请求。  SVG 示例：   <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg>  SVG 使用示例：   .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; }  8. 使用 CSS 样式化 SVG  SVG 可以直接嵌入到 HTML 文档中。这会将 SVG 节点直接添加到 DOM 中。因此，所有 SVG 样式属性都可以使用 CSS 应用。  DOM 中的 SVG：   <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body>  SVG 样式：   circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; } 嵌入的 SVG 代码量减少了，CSS 样式可以根据需要重用或动画。 请注意，在 标记中使用 SVG 或作为 CSS 背景图像意味着它们与 DOM 分离，并且 CSS 样式将不起作用。 <img>  9. 避免 Base64 编码 您可以将图像编码为 base64 字符串，您可以将其用作 HTML  标记和 CSS 背景中的数据 URI。 <img> 这会减少 HTTP 请求的数量，但会损害 CSS 性能：  base64 字符串可以比其二进制等效字符串大 30%。 浏览器必须先解码字符串，然后才能使用图像，并且 更改一个图像像素会使整个 CSS 文件无效。 仅当您使用非常小的、不经常更改的图像且生成的字符串不明显长于 URL 时，才考虑使用 base64 编码。 不要：   .background { background-image: url('data:image/jpg;base64,ABC123...'); } 做：   .svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); }  10. 简短提示 用 CSS 效果替换图像 - 使用 CSS 代码定义“图像”使用的带宽要少得多，并且以后更容易修改或制作动画。 使用现代布局技术 -  和  。 Flexbox Grid 使用 CSS 动画 - 和 总是比 JavaScript 快。 过渡 动画 避免昂贵的属性——一些 CSS 比其他的需要更多的处理。   border-radius   box-shadow   text-shadow   opacity   transform   filter   position: fixed   backdrop-filter   background-blend-mode  PS 感谢阅读！ 更多关于前端开发的文章： 提高 React 性能的 9 大技巧 一篇文章中的一些 HTML、CSS 小秘密 最鲜为人知的 HTML 5 和 CSS 3 技巧和最佳实践 JavaScript 最佳实践的 12 个鲜为人知的技巧

Mozilla

Progressive

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Programming

2022 - HackerNoon Contributor of the Year - React

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Software Developer of the Year

該音頻是用故事的原始語言製作的！

太長; 讀書

前 10 个 CSS 性能提示

前 10 个 CSS 性能提示

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Claude Sonnet 3.5 系统提示泄漏：法医分析

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

成功云迁移的完整指南：策略和最佳实践

Claude Sonnet 3.5 系统提示泄漏：法医分析

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

成功云迁移的完整指南：策略和最佳实践

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps