CSS性能优化

css性能优化

• CSS选择器性能
  对于整体的性能影响实际上主要体现在DOM渲染查找时的复杂度，比如嵌套要控制层数，规范化选择器的书写以及提高css代码的可维护性和健壮性。
  1.不必要的标签加选择器

//bad
ul#list-wrap {
    color: #ddd;
}

ul.list-container {
    color: #ccc;
}

//good
#list-wrap {
    color: #ddd;
}

2. 不添加根元素

//bad 
html tr td {
    color: #ddd;
}

//good 
tr td {
    color: #ddd;
}

3. 不在生产环境中使用通配选择器
4. 拒绝成串的链式调用

.wrap.top.title {
    color: #000;
}

如果可以，直接将三个类名合并为短横线链接的单个类名

5. 在必要时减少不必要出现的html标签
6. 在需要给div等标签添加样式的时候，考虑是否有原生的标签自带样式

<div>this is a bold line</div>
div {
    font-weight: bold;
}

//good
<b>this is a bold line</b>//可以直接替换掉原来的div

7. 使用less或sass等css预处理器的时候，最高嵌套层级为3层

• CSS渲染性能

css和html的加载过程如下（图来自mdn）

image.png

1. 可以通过压缩代码，进行性能优化
2. 减少阻塞加载，比如少用import

慎重选择高消耗的样式

1. box-shadows
2. border-radius
3. transparency
4. transforms

• 减少重排

解决方案：

1. 在修改DOM的样式时，不去一条条修改而是事先写好队形样式的类名，然后修改DOM的类名即可
2. 将DOM离线之后进行修改，比如先将DOM display:none之后再进行多次修改，最后将其显示出来，展示最终样式即可
3. 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位

• 不滥用浮动，一个页面中不超过10次浮动
• 不声明过多的font-size
• 标准化各浏览器的前缀
• 合理使用GPU加速