浏览器的渲染原理
- 解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构。
- 构建render树：DOM树和CSS树合并之后形成的render树。
- 布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
- 绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
需要注意的是：浏览器并不是一获取到
CSS样式就立马开始解析，而是根据CSS样式的书写顺序将之按照 DOM 树的结构分布渲染样式，然后开始遍历每个树结点的CSS样式进行解析，此时的CSS样式的遍历顺序完全是按照之前的书写顺序。
在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。
我们来看看下面这个代码片段：
width: 150px;
height: 150px;
font-size: 24px;
position: absolute;
当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染。
渲染引擎首先解除该元素在文档中所占位置，这就导致了该元素的占位情况发生了变化，其他元素可能会受到它回流的影响而重新排位。
我们对代码进行调整：
position: absolute;
width: 150px;
height: 150px;
font-size: 24px;
这里有一个规范，建议顺序大致如下：
-
定位属性
position display float left top right bottom overflow clear z-index -
自身属性
width height padding border margin background -
文字样式
font-family font-size font-style font-weight font-varient color -
文本属性
text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow -
CSS3 中新增属性
content box-shadow border-radius transform
有一些插件是可以来做这项工作的，比如 CSSLint。 参考：mp.weixin.qq.com/s/AvQt-Olma…
