CSS 渲染原理

参考：https://www.jianshu.com/p/9c71c70be3dc

1. CSS 渲染规则

css的渲染规则，是从上到下，从右到左渲染的。

.main h4 a { font-size: 14px; }

渲染过程是这样的：首先先找到所有的 a，沿着 a 的父元素查找h4，然后再沿着 h4，查找.main。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素的 html 都没有匹配，则这条路径不再遍历。下一个 a 开始重复这个查找匹配，直至没有a继续查找。

浏览器的这种查找规则是为了尽早过滤掉一些无关的样式规则和元素。

2. 影响DOM树构建的因素

• HTML响应流被阻塞在网络中
• 有加载未完成的脚本
• 遇到<script>, 但是此时还有未加载完的样式文件

3. 优化CSS

（1）Stylesheets 放在 HTML 页面头部

浏览器在所有的 stylesheets 加载完成之后，才会开始渲染整个页面，在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部，页面渲染就不仅仅是在等待 stylesheet 的加载，还要等待 html 内容加载完成，这样一来，用户看到页面的时间会更晚。

对于 @import 和 两种加载外部 CSS 文件的方式：@import 就相当于是把 标签放在页面的底部，所以从优化性能的角度看，应该尽量避免使用 @import 命令

（2）嵌套层级不要超过三级

一般情况下，嵌套层级不要超过三级，过渡的嵌套会导致代码变得臃肿，导致css文件体积变大，造成性能上的浪费，影响渲染的速度；css层级太多，也过于依赖html DOM结构，不易于维护。如果层级比较深，就直接定义一个class代替多余的层级。

（3）css 命名规范，书写规范。

（4）多用继承属性

  尽量的继承父类样式 ，重复的定义会造成很多不必要的性能浪费。

（5）少用滤镜，少用position: absolute;

（6）使用简写样式

见下例

.mg {
  margin-top: 20px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-left: 100px;
}

可以简写为

.mg {
  margin: 20px 0px 20px 100px;
}

（7）不要在id选择器和class选择器前使用标签名

例如：

div #box {
  color: white;
}

id选择器本身就能唯一确定一个元素，没必要再在前面加上标签名。同样，类选择器也是，如果需要给某个标签的类增添额外的样式，建议使用另一个类名。这种情况下，也可以使用 div .box{} 形式，差别不大。

（8）平铺的背景图片不要过小，1px的图片平铺长宽25px的区域块，需要2500次，太影响渲染速度。

（9）谨慎使用float

（10）合理化布局（模块化布局）

 可以把样式划分为”基类“ 和 “扩展类”； 把模块基本相同的样式写在基类里，不同的再重新用class定义，写在扩展类中。

（11）尽量少用通配符，只用通配符设定一切基础的样式，如：

* {margin:0; padding:0;}