浏览器渲染页面的流程
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事件发生时
注意:重排必将引起重绘,而重绘不一定会引起重排。