瀏覽器渲染頁面的流程

瀏覽器渲染頁面的流程

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事件發生時

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

瀏覽器渲染頁面的流程

不同瀏覽器有不同的渲染引擎,比如firefox使用gecko,而safari和chrome使用webkit 解析html生成dom樹 在生成dom樹的過程中會被css和js的載入執行阻塞,也就是渲染阻塞解析css生成cssom規則樹 對於外部css檔案,每個css檔案都會被解析成stylesheet...

瀏覽器渲染頁面的原理及流程

瀏覽器將網域名稱通過網路通訊從伺服器拿到html檔案後，如何渲染頁面呢？1.根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。2.構建渲染樹 render tree 3.頁面的重...

瀏覽器渲染頁面的原理及流程

1.根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。js會對dom節點進行操作，瀏覽器無法 未來的dom節點的具體內容，為了防止無效操作，節省資源，只能阻塞dom樹的構建。2....