CSS 性能优化的 8 个技巧

这周周会翼巧同学分享了「内联首屏关键CSS(Critical CSS)」

祭出原文👉 CSS性能优化的 8 个技巧

翼巧同学使用的是第一种方式（但不是内联，是内嵌），反正我已经知道怎么做的了，来看看优缺点吧！

关键 CSS

优点

1. 内联 CSS 能够使浏览器开始页面渲染的时间提前

缺点

1. 无法缓存 CSS
2. 内嵌样式体积需要较小

异步加载 CSS

1. 通过 script 标签异步创建 link 标签

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

文件压缩

去除无用 CSS

1. 保持简单，不要使用嵌套过多过于复杂的选择器
2. 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用
3. 不要使用类选择器和 ID 选择器修饰元素标签
4. 不要为了追求速度而放弃可读性与可维护性

复习一遍： 为什么 CSS 选择器是从右向左匹配的

CSS 中更多的选择器是不会匹配的，所以在考虑性能问题时，需要考虑的是如何在选择器「不匹配」时提升效率。从右向左匹配就是为了达成这一目的的，通过这一策略能够使得CSS选择器在不匹配的时候效率更高。这样想来，在匹配时多耗费一些性能也能够想的通了

减少使用昂贵的属性

减少重排和避免重绘

不要使用 @import

使用 @import 引用的 CSS 文件只有在引用它的那个css文件被「下载、解析」之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。

直接导致的后果：当然是异步加载完的重绘

That’s All !