浏览器渲染页面的流程

浏览器渲染页面的流程

一、根据html文件构建DOM树和CSSOM树。构建DOM树期间，若是遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
二、构建渲染树（Render Tree）。
三、页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操做了DOM节点，根据JS对DOM操做动做的大小，浏览器对页面进行重绘或是重排。

　  引发重排的场景：（当页面布局和几何属性改变时就须要重排）

　（1）、添加或者删除可见的DOM元素；

    （2）、元素位置改变——display、float、position、overflow等等；

    （3）、元素尺寸改变——边距、填充、边框、宽度和高度

    （4）、内容改变——好比文本改变或者图片大小改变而引发的计算值宽度和高度改变；

    （5）、页面渲染初始化；

    （6）、浏览器窗口尺寸改变——resize事件发生时

注意：重排必将引发重绘，而重绘不必定会引发重排。