CSS 优化 提高性能的方法有哪些？

一、写在前面

css的优化方案，之前没有提及，所以接下来进行总结一下。

二、具体优化方案

2.1、加载性能

1、css压缩：将写好的css进行打包，可以减少很多的体积。

2、css单一样式：在需要下边距和左边距的时候，很多时候选择：margin:top 0 bottom 0,但是margin-bottom:bot tom;margin-left:left;执行效率更高。

3、减少@import,而建议使用link,因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

2.2、选择器性能

1、关键选择器：选择器的最后面的部分为关键选择器。css选择器是从右向左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等。

2、如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则。

3、避免使用通配符规则，如果*{}，计算次数惊人，只对需要用到的元素进行选择。

4、尽量少的区队标签进行选择，而使用class。

5、了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

2.3、渲染性能

1、慎重使用高性能属性：浮动，定位。

2、尽量减少页面的重排和重绘。

3、去除控规则，{}。空规则的产生的原因一般来说是为了预留样式。去除这些空规则则无疑能减少css文档体积。

4、属性值为0时，不加单位。

5、属性值为浮动小数0.***，可以省略小数点之前的0。

6、标准化各种浏览器前缀，带浏览器前缀的在前。标准属性在后。

7、不使用@import前缀，它会影响css的加载速度。

8、选择器优先嵌套，尽量避免层级过深。

9、css雪碧图：同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身不变大，使用时，优劣考虑清楚使用。

10、正确使用display的属性，由于display的作用，某一些样式组合会无效，徒增样式体积的同时也影响性能。

2.4、可维护性和健壮性

1、将具有相同内容的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。

2、样式和内容分离，将css代码定义到外部css中。

如果觉得《CSS 优化 提高性能的方法有哪些？》对你有帮助，请点赞、收藏，并留下你的观点哦！