Dom树的加载过程

1、构建dom树：html解析器

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

到遇到有defer或async属性的<script>时，

1.1.文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析&渲染完毕后。

会等到所有的defer脚本加载完毕并按照顺序执行（引入顺序），DOMContentLoaded事件调用之前。

1.2.async脚本会在加载完毕后执行。

async脚本的加载不计入DOMContentLoaded事件统计。

2、构建css树：css解析器

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

4、布局layout与绘制paint

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

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

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

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