传统DOM渲染步骤

传统DOM渲染流程

1. 解析HTML生成DOM树 - 渲染引擎首先解析HTML文档，生成DOM树

2. 解析CSS生成CSSOM树 - 不管是内联式，外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树

3. 构建Render树 - 根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree)，

4. 布局绘制Render树 - 对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置，最后遍历渲染树并用UI后端层将每一个节点绘制出来

5. 展示

以上步骤是一个渐进的过程，为了提高用户体验，渲染引擎试图尽可能快的把结果显示给最终用户。它不会等到所有HTML都被解析完才创建并布局渲染树。它会在从网络层获取文档内容的同时把已经接收到的局部内容先展示出来。

重排和重绘

当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。

简单的说，重排负责元素的几何属性更新，重绘负责元素的样式更新。

而且，重排必然带来重绘，但是重绘未必带来重排。比如，改变某个元素的背景，这个就不涉及元素的几何属性，所以只发生重绘。

在传统DOM操作交互的过程中，必然会不断引发重排和重绘，开销昂贵。故而，有了虚拟DOM的概念。