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

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

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

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

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

一.瀏覽器解析:

（1）.DOM:

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

（2）.CSSOM:

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

（3）.RenderTree:

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

構建的過程如下:

`a:3:{s:3:"pic";s:43:"portal/201704/09/212713gbc691v901ri309r.png";s:5:"thumb";s:0:"";s:6:"remote";N;}`

二.佈局:

有了渲染樹，就進入佈局階段。根據渲染樹種確定的每個DOM元素的樣式規則，瀏覽器就能具體計算每個DOM元素最終在螢幕上顯示的大小位置，寬高等等幾何屬性。由於文件流中的佈局是相對的，因此每個元素的佈局發生變化，會聯動引發其他元素的佈局變化。

三.繪製:

繪製就是在已確定了幾何屬性的元素上填充畫素，比如繪製文字，顏色，影像，邊框，陰影等等可視元素。

這期間會產生多個圖層。

合併渲染層:

到這裡，瀏覽器的渲染過程就接近尾聲。每個圖層繪製完，瀏覽器會將其按照合理的順序合併到同一圖層，並顯示在瀏覽器上。

四.工具:

藉助ChromeDevTools等工具，我們能深入瞭解瀏覽器處理的整個過程。

`a:3:{s:3:"pic";s:43:"portal/201704/09/212814mazwb5kv9wv7en4f.png";s:5:"thumb";s:0:"";s:6:"remote";N;}`

原文釋出時間為：2017-4-9

本文作者：admin

本文來自雲棲社群合作伙伴“螞蟻部落”，瞭解相關資訊可以關注螞蟻部落

原文連結：瀏覽器將html程式碼渲染成頁面流程簡單介紹


相關文章