CSS性能优化

我会带着你远行 2023-01-12 01:57 171阅读 0赞

我们都知道对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。

下面我们来看一下css性能优化的几种方法：

## **实践型的4个优化技巧** ##

**1. 内联首屏关键CSS（Critical CSS）**

性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。

这一指标影响用户看到页面前所需等待的时间，而\*\*内联首屏关键CSS（即Critical CSS，可以称之为首屏关键CSS）\*\*能减少这一时间。

**2. 异步加载CSS**

CSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。有时，这种阻塞是必须的，因为我们并不希望在所需的CSS加载之前，浏览器就开始渲染页面。

那么将首屏关键CSS内联后，剩余的CSS内容的阻塞渲染就不是必需的了，可以使用外部CSS，并且异步加载。

**3. 文件压缩**

性能优化时有一个最容易想到，也最常使用的方法，那就是文件压缩，这一方案往往效果显著。

文件的大小会直接影响浏览器的加载速度，这一点在网络较差时表现地尤为明显。相信大家都早已习惯对CSS进行压缩，现在的构建工具，如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。

**4. 去除无用CSS**

我们可以试着找到并删除代码中无用的CSS。

一般情况下，会存在这两种无用的CSS代码：一种是不同元素或者其他情况下的重复代码，一种是整个页面内没有生效的CSS代码。

## **建议型的4个技巧** ##

**1. 有选择地使用选择器**

现代浏览器在这一方面做了很多优化，不同选择器的性能差别并不明显，甚至可以说差别甚微。此外不同选择器在不同浏览器中的性能表现8也不完全统一，在编写CSS的时候无法兼顾每种浏览器。

鉴于这两点原因，我们在使用选择器时，只需要记住以下几点，其他的可以全凭喜好。

*  保持简单，不要使用嵌套过多过于复杂的选择器。
 *  通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。
 *  不要使用类选择器和ID选择器修饰元素标签，如h3\#markdown-content，这样多此一举，还会降低效率。
 *  不要为了追求速度而放弃可读性与可维护性。

**2. 减少使用昂贵的属性**

在浏览器绘制屏幕时，所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价。

当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写CSS时，我们应该尽量减少使用昂贵属性，如box-shadow/border-radius/filter/透明度/:nth-child等。

**3. 优化重排与重绘**

在网站的使用过程中，某些操作会导致样式的改变，这时浏览器需要检测这些改变并重新渲染，其中有些操作所耗费的性能更多。我们都知道，当FPS为60时，用户使用网站时才会感到流畅。

这也就是说，我们需要在16.67ms内完成每次渲染相关的所有操作，所以我们要尽量减少耗费更多的操作。

(1)减少重排

重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。如下所示，有很多操作会触发重排，我们应该避免频繁触发这些操作。

(2)避免不必要的重绘

当元素的外观（如color，background，visibility等属性）发生改变时，会触发重绘。在网站的使用过程中，重绘是无法避免的。不过，浏览器对此做了优化，它会将多次的重排、重绘操作合并为一次执行。

不过我们仍需要避免不必要的重绘，如页面滚动时触发的hover事件，可以在滚动的时候禁用hover事件，这样页面在滚动时会更加流畅。

**4. 不要使用@import**

最后提一下，不要使用@import引入CSS，相信大家也很少使用。

不建议使用@import主要有以下两点原因。

1、首先，使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。

这就导致浏览器无法并行下载所需的样式文件。

2、其次，多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。

CSS性能优化

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS性能优化

相关 CSS性能优化：可以试一试内联CSS？

相关前端性能优化-CSS性能优化

相关 CSS性能优化总结

相关前端性能优化：尽可能使用CSS动画

相关性能优化--JS、CSS压缩合并

相关性能优化之YUICompressor压缩JS、CSS

相关 CSS性能优化的8个技巧

相关前端性能优化（css动画篇）

相关性能优化篇 - css typed OM（css typed object model）