Dom树加载过程

1、构建dom树：html解析器

过程中遇到没有defer和async属性的<script>时，会中断解析，加载<script>文件并立即执行

到遇到有defer或async属性的<script>时，见 《js async defer》

2、构建css树：css解析器

3、构建render树：dom树+css树

4、布局layout与绘制paint

计算对象之间的大小、距离，确定每个节点在屏幕上的确切坐标，映射浏览器屏幕绘制，使用UI后端层绘制每一个节点

reflow（回流）：当元素属性发生改变且影响布局时（宽高、内外边距等），产生回流，相当于刷新页面

repaint（重绘）：当元素属性发生改变且不影响布局时（颜色、透明度等），产生重绘，相当于不刷新页面，动态更新内容。

重绘不一定引起回流，回流必将引起重绘。