大家好！有很多关于 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

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

太長; 讀書

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

前 10 个 CSS 性能提示

太長; 讀書

Companies Mentioned

@wownetort

相關故事