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等标签添加样式的时候，考虑是否有原生的标签自带样式

this is a bold line

div { font-weight: bold; }

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

```

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

慎重选择高消耗的样式

解决方案：

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