css性能优化

前言

说道网站性能优化一般很少提起关于css的优化手段，其实写好css可以提高网页渲染速度减少白屏时间。下面介绍下常见的css性能优化策略

优化手段

优化选择器

浏览器对css选择器的匹配顺序是从右到左的。

div#userName span i.iconfont

如上: 浏览器解析步骤

1. 查找页面中所有class为iconfont的i元素
2. 保留1中所有父元素为span的元素
3. 保留2中所有父元素id为userName的div元素

这样的好处是可以尽早过滤掉无关的样式尽早匹配目标元素。所以最右侧选择器及选择器的长度对浏览器解析css至关重要。

css选择器效率从低到高为:

1. id选择器，比如#header
2. 类选择器，比如.main
3. 类型选择器，比如div
4. 兄弟选择器，比如div + p
5. 子元素选择器，比如div > p
6. 包含选择器，比如div span
7. 通配选择器，比如div *
8. 属性选择器，比如input[type=“text”]
9. 伪类选择器，比如a:hover,ul:nth-child(2n)

综上：1.尽量使用效率较高的选择器，比如尽量使用类选择器避免使用标签选择器。 2.选择器嵌套最好不要超过三层。

属性循序

按照一定的顺序书写css不仅能提高代码可读性还能减少浏览器回流提高渲染性能。一般建议的css书写顺序如下

1、定位：position z-index left right top bottom clip等。
2、自身属性：width height min-height max-height min-width max-width等。
3、文字样式：color font-size letter-spacing, color text-align等。
4、背景：background-image border等。
5、文本属性: text-align vertical-align text-wrap text-transform text-indent text-decoration  letter-spacing word-spacing white-space text-overflow等。
6、css3中属性：content、box-shadow、animation、border-radius、transform等

其他

• 删除未生效的css；
• 内敛关键css(如全局标签样式初始化等)；
• 压缩css代码；
• 避免使用 @import

问题修复

css编码规范很多，保证代码符合最佳实践使用校验工具非常重要，stylelint就是目前一个非常好的css校验及修复插件。详细参考https://editor.csdn.net/md/?articleId=108535741