瀏覽器如何渲染 HTML CSS

我們現在已經知道，使用 html & css 可以搭建出乙個漂亮的 web 頁面。

那麼瀏覽器到底是如何使用我們的 html & css 渲染成我們在螢幕上所看到的頁面呢？

雖然具體渲染過程很複雜，但是還是可以將其分為幾個關鍵路徑，如下：

首先瀏覽器渲染頁面前會根據 html 結構構建成對應的 dom 樹。

以下面的 html **為例：

hello web performance students!

其 dom 樹生成的流程如下圖：

轉換：瀏覽器從磁碟或網路讀取 html 的原始位元組，並根據檔案的指定編碼（例如 utf-8）將它們轉換成各個字元。

令牌化：瀏覽器將字串轉換成 w3c html5 標準規定的各種令牌，例如，「」、「」，以及其他尖括號內的字串。每個令牌都具有特殊含義和一組規則。

詞法分析：發出的令牌轉換成定義其屬性和規則的「物件」。

dom 構建：最後，由於 html 標記定義不同標記之間的關係（一些標記包含在其他標記內），建立的物件鏈結在乙個樹資料結構內，此結構也會捕獲原始標記中定義的父項-子項關係：html 物件是 body 物件的父項，body 是 paragraph 物件的父項，依此類推。

整個流程的最終輸出就是我們這個簡單頁面的文件物件模型 (dom)，如下圖：

在瀏覽器構建上面的 dom 時，在文件的 head 部分遇到了乙個 link 標記，該標記引用乙個外部 css 樣式表：style.css。由於預見到需要利用該資源來渲染頁面，它會立即發出對該資源的請求，並返回以下內容：

/* style.css */ body p span p span img

與處理 html 時一樣，我們需要將收到的 css 規則轉換成某種瀏覽器能夠理解和處理的東西。因此，我們會重複 html 過程，不過是為 css 而不是 html：

css 位元組轉換成字元，接著轉換成令牌和節點，最後掛靠到乙個稱為「css 物件模型」(cssom) 的樹結構內：

cssom 為何具有樹結構？這是因為瀏覽器為頁面上的任何物件計算最後一組樣式時，都會先從適用於該節點的最通用規則開始（例如，如果該節點是 body 元素的子項，則應用所有 body 樣式），然後通過應用更具體的規則（即規則「向下級聯」）以遞迴方式優化計算的樣式。

以上面的 cssom 樹為例進行更具體的闡述。span 標記內包含的任何置於 body 元素內的文字都將具有 16 畫素字型大小，並且顏色為紅色 — font-size 指令從 body 向下級聯至 span。不過，如果某個 span 標記是某個段落 (p) 標記的子項，則其內容將不會顯示。

接下來就是將 dom 樹與 cssom 樹合併形成渲染樹。

渲染樹會網羅網頁上所有可見的 dom 內容，以及每個節點的所有 cssom 樣式資訊。

注：渲染樹只包含渲染網頁所需的節點，如display: none;的元素是不會出現在渲染樹種的。

有了渲染樹，我們就可以進入「布局」階段。

到目前為止，我們計算了哪些節點應該是可見的以及它們的計算樣式，但我們尚未計算它們在裝置視口內的確切位置和大小---這就是「布局」階段，也稱為「自動重排」。

為弄清每個物件在網頁上的確切大小和位置，瀏覽器從渲染樹的根節點開始進行遍歷。讓我們考慮下面這樣乙個簡單的例項：

hello world!

以上網頁的正文包含兩個巢狀 div：第乙個（父）div 將節點的顯示尺寸設定為視口寬度的 50%；而裡面內嵌的第二個 div 將其寬度設定為其父項的 50%，即視口寬度的 25%。如下圖：

布局流程的輸出是乙個「盒模型」，它會精確地捕獲每個元素在視口內的確切位置和尺寸：所有相對測量值都轉換為螢幕上的絕對畫素。

最後，既然我們知道了哪些節點可見、它們的計算樣式以及幾何資訊，我們終於可以將這些資訊傳遞給最後乙個階段：將渲染樹中的每個節點轉換成螢幕上的實際畫素形成我們可見的頁面。這一步通常稱為「繪製」或「柵格化」。

注：執行渲染樹構建、布局和繪製所需的時間將取決於文件大小、應用的樣式，以及執行文件的裝置：文件越大，瀏覽器需要完成的工作就越多；樣式越複雜，繪製需要的時間就越長（例如，單色的繪製開銷「較小」，而陰影的計算和渲染開銷則要「大得多」）。