瀏覽器渲染頁面的流程

瀏覽器渲染頁面的流程

一、根據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事件發生時

注意：重排必將引發重繪，而重繪不必定會引發重排。