1,921 讀數

前 10 个 CSS 性能提示

经过 Nikita Starichenko5m2022/11/14

太長; 讀書

大家好！有很多关于 CSS 样式的提示和技巧。但不在本文中。今天我想谈谈如何更有效地使用 CSS 并制作

Companies Mentioned

大家好！有很多关于 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> <!-- load remaining styles --> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript>

3.避免`@import`

@import at 规则允许任何 CSS 文件包含在另一个文件中。这似乎是加载较小组件和字体的合理方式。但事实并非如此。

@import规则可以嵌套，因此浏览器必须依次加载和解析每个文件。

HTML 中的多个<link>标记将并行加载 CSS 文件，这非常有效——尤其是在使用 HTTP/2 时。

不要：

 /* 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 文件

<link>标签提供了一个可选的 preload 属性，可以立即开始下载，而不是等待 HTML 中的真正引用。

 <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- some code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" />

5.渐进式渲染

渐进式渲染不是使用单个站点范围的 CSS 文件，而是一种为单独的组件定义单独的样式表的技术。每个都在 HTML 中引用组件之前立即加载。

每个<link>仍然会阻塞渲染，但时间更短，因为文件更小。该页面可以更快地使用，因为每个组件都是按顺序呈现的；可以在加载剩余内容的同时查看页面顶部。

 <head> <!-- core styles used across components --> <link rel='stylesheet' href='base.css' /> </head> <body> <!-- header component --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- primary content --> <link rel='stylesheet' href='content.css' /> <main> <!-- form styling --> <link rel='stylesheet' href='form.css' /> <form>...</form> </main> <!-- header component --> <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body>

6.使用媒体查询渲染

单个连接和缩小将使大多数站点受益，但需要大量较大屏幕样式的站点可以拆分 CSS 文件并使用媒体查询加载。

 <!-- core styles loaded on all devices --> <link rel="stylesheet" href="core.css"> <!-- served to screens at least 40em wide --> <link rel="stylesheet" media="(min-width: 40em)" href="40em.css"> <!-- served to screens at least 80em wide --> <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 样式可以根据需要重用或动画。

请注意，在<img>标记中使用 SVG 或作为 CSS 背景图像意味着它们与 DOM 分离，并且 CSS 样式将不起作用。

9. 避免 Base64 编码

您可以将图像编码为 base64 字符串，您可以将其用作 HTML <img>标记和 CSS 背景中的数据 URI。

这会减少 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 比其他的需要更多的处理。
1. border-radius
2. box-shadow
3. text-shadow
4. opacity
5. transform
6. filter
7. position: fixed
8. backdrop-filter
9. background-blend-mode