css性能优化
- CSS选择器性能
对于整体的性能影响实际上主要体现在DOM渲染查找时的复杂度，比如嵌套要控制层数，规范化选择器的书写以及提高css代码的可维护性和健壮性。
1.不必要的标签加选择器
//bad
ul#list-wrap {
color: #ddd;
}
ul.list-container {
color: #ccc;
}
//good
#list-wrap {
color: #ddd;
}
- 不添加根元素
//bad
html tr td {
color: #ddd;
}
//good
tr td {
color: #ddd;
}
- 不在生产环境中使用通配选择器
- 拒绝成串的链式调用
.wrap.top.title {
color: #000;
}
如果可以，直接将三个类名合并为短横线链接的单个类名
- 在必要时减少不必要出现的html标签
- 在需要给div等标签添加样式的时候，考虑是否有原生的标签自带样式
<div>this is a bold line</div>
div {
font-weight: bold;
}
//good
<b>this is a bold line</b>//可以直接替换掉原来的div
- 使用less或sass等css预处理器的时候，最高嵌套层级为3层
- CSS渲染性能
css和html的加载过程如下（图来自mdn）
image.png
- 可以通过压缩代码，进行性能优化
- 减少阻塞加载，比如少用import
慎重选择高消耗的样式
- box-shadows
- border-radius
- transparency
- transforms
- 减少重排
解决方案：
- 在修改DOM的样式时，不去一条条修改而是事先写好队形样式的类名，然后修改DOM的类名即可
- 将DOM离线之后进行修改，比如先将DOM display:none之后再进行多次修改，最后将其显示出来，展示最终样式即可
- 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位
- 不滥用浮动，一个页面中不超过10次浮动
- 不声明过多的font-size
- 标准化各浏览器的前缀
- 合理使用GPU加速
