浏览器的渲染过程

一、渲染过程

1.解析HTML文档，构建DOM tree;

2.解析CSS文件，构建CSSOM tree;

3.合并DOM tree和CSSOM tree，生成render tree；

4.开始布局，计算每个节点的位置信息；

5.将render tree每个节点绘制显示出来。

二、具体流程

1、解析HTML生成DOM tree

在浏览器接收到服务器响应来的HTML文档之后，会遍历文档节点，生成DOM tree。但是DOM tree的生成过程中可能会被CSS和JS的加载执行阻塞。

2、解析CSS生成CSSOM tree

浏览器解析CSS文件生成CSSOM tree，每个CSS文件都被分析成StyleSheet对象，每个对象都包含CSS规则，CSS规则包括选择器、一条或多条声明。

3、将DOM tree和CSSOM tree合并在一起生成render tree

通过DOM tree和CSSOM tree可以合成render tree。浏览器会先从DOM tree的根节点开始遍历每一个可见节点，然后找到与每一个可见节点适配的样式并进行应用。
对于不可见的元素，它们是不会出现在render tree上的，但是visibility为hidden的元素会出现这颗树上。

4、遍历render tree开始布局，计算每个节点的位置大小信息

布局阶段会从render tree的根节点开始遍历，然后确定每个节点在页面上的位置和大小，最后输出一个盒子模型，它会精确的捕获每个节点在屏幕上的确切位置和大小。

5、将render tree每个节点绘制显示出来

绘制阶段会遍历render tree，调用渲染器的paint()方法在屏幕显示内容。
render tree的绘制工作是由浏览器的UI后端组件完成的。

渲染阻塞:

浏览器解析文档，当遇到<script>标签时，会立即执行脚本，暂停文档的解析。因为JS可能会改动DOM和CSS，直到脚本执行完成，然后才会继续解析文档。
如果是外部脚本，则会先下载完脚本，然后再继续解析文档。

两个原则：CSS优先、JS置后。

三、reflow(回流)和repaint(重绘):

HTML默认是流式布局，CSS和JS会打破这种布局，改变DOM的外观样式以及大小和位置。

repaint：一般在改变DOM元素视觉效果时触发，不影响整体布局，是对某个DOM元素进行重绘，比如元素的背景色变了，不影响元素的大小和位置。
repaint的常见场景：

• 字体颜色的修改；
• 背景颜色的修改；
• text-align的修改等；

reflow：某个DOM元素的位置或尺寸变了，需要重新计算所有DOM元素的位置和大小。所以repaint比reflow的影响要大得多，整个页面需要重排，也就是对每个DOM元素进行重新渲染。
reflow的常见场景：

• width height padding margin border的修改；
• 窗口大小的改变；
• 文字大小的改变；
• 操作class属性；
• 添加、删除DOM元素或改变DOM元素的dispaly属性等；

四、性能优化

应当尽量少的reflow和repaint

• 尽量减少DOM元素的相互影响，直接修饰你想修饰的元素，避免通过父元素作用域子元素
• 避免设置内联样式
• 设置动画元素的position为fixed或absolute
• 权衡速度的平滑，动画精度太强，会造成更多的reflow或repaint
• 避免使用table布局，table的每个元素的大小以及内容的改动，都会导致整个table进行重新计算
• 避免在CSS中使用运算表达式

有些情况下，修改了元素样式之后，浏览器并不会立即reflow或repaint，而是将这样的操作积攒一批，然后做一次reflow,这就叫做异步reflow或者增量异步reflow.

四、结语

如果本文存在错误的地方，欢迎指出批评~~~