DOM渲染及过程

1.什么是DOM渲染？

DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。

2.DOM渲染的演化过程，大致可以分为可以分为三个阶段：
1.解析HTML文件，创建DOM树

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS

优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
特定级：id数100+类或伪类数10+tag名称*1

3.将CSS与DOM合并，构建渲染树（renderingtree）

DOM树与HTML一一对应，渲染树会忽略诸如head、display:none的元素

4.布局和绘制，重绘（repaint）和重排（reflow）

reflow(重排):根据 Reader Tree 进行节点信息计算(layout)，若渲染树的一部分更新，且尺寸变化，就会发生重排；
repaint(重绘):根据计算好的信息绘制整个页面(Painting)，部分节点需要更新，但不改变其他集合形状。如改变某个元素的颜色，就会发生重绘。
5.理论上，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重绘/重排过程，而如果是css非几何属性更改，则只会引起重绘过程，所以重排一定引起重绘，重绘不一定引起重排
6.因为有时JS也参与DOM Tree 的构建，因而我们会先执行js再开始构建渲染树，js脚本会阻塞Reader Tree的构建，即阻塞了页面的渲染