CSS性能优化
一、写法优化
- 简化选择器：id选择器不用嵌套；减少 * 通配符、[hidden=‘true’] 属性选择器；利用继承机制，少写新类名【CSS 选择器是从右向左进行匹配的，避免匹配的开销】
- 尽量避免重排：重新计算元素位置和几何结构
- 减少使用昂贵属性 - 需要浏览器进行操作或计算的属性：box-shadow、border-radius、透明度、:nth-child等；
- 动画尽量使用 GPU 加速
避免重排 - 修改样式时技巧：
- 不要一条条的修改dom的样式，预先定义好class，然后修改 dom 的classname
- 不要修改影响范围较大的dom
- 为动画元素使用绝对定位
- 不要table布局，因为一个很小的改动会造成整个table重新布局
- 『避免设置大量的style属性』，通过设置style属性改变节点样式的话，每一次设置都会触发一次reflow，所以最好使用class属性
- 如果css里面有计算表达式，每次都会重新计算一遍，触发一次reflow
二、CSS文件加载优化
- 删除不必要的样式；css 模块化 - 延迟加载非必要样式表；公共样式文件单独引入，缓存在本地
- css 压缩
- 避免使用
@import，不能和 html 并发请求，浏览器解析到 css 文件才知道要下载另一个 css 文件，延后加载；link标签引入的css 文件会触发浏览器的预加载（html 加载的时候预扫描，js+css提前开始下载）
三、补充：导致重排的操作
- 改变窗口/文字的大小/改变元素的内外边距
- 添加 删除样式表
- 内容的改变 输入框输入内容也会
- 伪类的激活
- 操作class属性/脚本操作dom/js改变css类
- 计算offsetWidth和offsetHeight
- 设置style属性
转换成样式属性就是：
1. 大小有关的 width,height,padding,margin,border-width,border,min-height
2. 布局有关的 display,top,position,float,left,right,bottom
3. 字体有关的 font-size,text-align,font-weight,font-family,line-height,white-space,vertical-align
4. 隐藏有关的 overflow,overflow-x,overflow-y