CSS性能优化

这是我参与更文挑战的第18天，活动详情查看：更文挑战

1、避免使用@import

在CSS模块化的时候有说到可以通过 @import来实现CSS模块化，但是这种方式是不建议使用的。 因为我们使用@import来引入css文件，会使得页面在加载的时候增加延迟。

所以我们在引入外部CSS文件的时候一般都是通过头部的link标签。

2、避免过分重排

修改某些css样式会使得部分或整个页面重新渲染，我们应该尽量减少重新渲染。

（1）. 不要一条条的修改dom的样式，预先定义好class，然后修改dom的classname

（2）. 不要修改影响范围较大的dom

（3）. 为动画元素使用绝对定位

（4）. 尽量不要使用table布局，因为一个很小的改动会造成整个table重新布局

（5）. 避免设置大量的style属性，通过设置style属性改变节点样式的话，每一次设置都会触发一次reflow，所以最好使用class属性

（6）. 如果css里面有计算表达式，每次都会重新计算一遍，触发一次reflow

3、删除无用的css代码

我们在页面开发过程中经常会出现很多无用的css代码，

它们或许是调试的时候设置的background，或许是被后面的样式覆盖的样式，或许是设置了之后没有生效的样式。

这些CSS代码都是可以删除的。

4、选择合适的选择器

CSS的选择器有很多很多种，也许同一个元素对象可以使用不同的选择器，我们的原则应该是精确而简单的选择器。 不要嵌套很多复杂的选择器，不利于渲染也不利于我们阅读。

另外，通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。

5、慎重选择高消耗的样式

有一些样式在绘制前需要进行大量计算。

比如border-radius、box-shadow、transform，我们应该根据业务需求选择合适的属性。

6、尽量少用CSS表达式

表达式会让你的代码显得更加酷炫，但是对性能的浪费可能是超乎你想象的。

7、合成icon图片

利用cssSprite合成icon图片，用宽高加上background-position的背景图方式显现icon图，这样很实用，减少了http请求。

8、减少css嵌套

我们在书写css代码的时候很容易就嵌套起来，但这对性能也会产生浪费，最好不要嵌套三层以上。

9、合并公共样式

拆分出公共css文件，对于比较大的项目可以将大部分页面的公共结构样式提取出来放到单独css文件里，这样一次下载 后就放到缓存里，

10、CSS文件压缩

是最容易想到的一个性能优化方式了，文件的大小会直接影响浏览器的加载速度，这一点在网络较差时表现地尤为明显。 webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。

以上便是我总结的关于CSS性能优化方式，欢迎批评指正~~