瀏覽器將html程式碼渲染成頁面流程簡單介紹

antzone發表於2017-04-09
瀏覽器HTML

無論網站是動態的，還是靜態，最終返回客戶端的都是HTML程式碼。

這些HTML程式碼會經過瀏覽器的處理，最終將各種各樣的頁面展現在使用者面前。

下面介紹一下瀏覽器對HTML程式碼的渲染流程。

一.瀏覽器解析:

（1）.DOM:

DOM物件是瀏覽器解析HTML指令碼生成的，最終輸出一個樹狀結構的物件。

（2）.CSSOM:

CSSOM物件是瀏覽器解析CSS指令碼生成的，最終也是輸出類似DOM的樹狀結構。

（3）.RenderTree:

DOM與CSSOM 融合成一棵RenderTree（渲染樹），隨後計算每個可見元素的佈局，並輸出給繪製過程，在螢幕上渲染畫素。優化這裡的每一步對實現最佳渲染效能至關重要。

構建的過程如下:

相關文章