浏览器渲染页面的流程

浏览器渲染页面的流程

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

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

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

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

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

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

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

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

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

　　　 

 

转载于:https://www.cnblogs.com/angel-cloud/p/11380320.html