瀏覽器工作原理05 [#] 渲染流程（上）：HTML、CSS和JavaScript是如何變成頁面的

引用

瀏覽器工作原理與實踐

一、提出問題

在上一篇文章中我們介紹了導航相關的流程，那導航被提交后又會怎么樣呢？就進入了渲染階段。這個階段很重要，了解其相關流程能讓你“看透”頁面是如何工作的，有了這些知識，你可以解決一系列相關的問題，比如能熟練使用開發者工具，因為能夠理解開發者工具里面大部分項目的含義，能優化頁面卡頓問題，使用JavaScript優化動畫流程，通過優化樣式表來防止強制同步布局，等等。

既然它的功能這么強大，那么今天，我們就來好好聊聊渲染流程。

通常，我們編寫好HTML、CSS、JavaScript等文件，經過瀏覽器就會顯示出漂亮的頁面（如下圖所示），但是你知道它們是如何轉化成頁面的嗎？這背后的原理，估計很多人都答不上來。

從圖中可以看出，左邊輸入的是HTML、CSS、JavaScript數據，這些數據經過中間渲染模塊的處理，最終輸出為屏幕上的像素。

這中間的渲染模塊就是我們今天要討論的主題。為了能更好地理解下文，你可以先結合下圖快速抓住HTML、CSS和JavaScript的含義：

從上圖可以看出，HTML的內容是由標記和文本組成。標記也稱為標簽，每個標簽都有它自己的語意，瀏覽器會根據標簽的語意來正確展示HTML內容。比如上面的標簽是告訴瀏覽器在這里的內容需要創建一個新段落，中間的文本就是段落中需要顯示的內容

如果需要改變HTML的字體顏色、大小等信息，就需要用到CSS。CSS又稱為層疊樣式表，是由選擇器和屬性組成，比如圖中的p選擇器，它會把HTML里面標簽的內容選擇出來，然后再把選擇器的屬性值應用到標簽內容上。選擇器里面有個color屬性，它的值是red，這是告訴渲染引擎把標簽的內容顯示為紅色

至于JavaScript（簡稱為JS），使用它可以使網頁的內容“動”起來，比如上圖中，可以通過JavaScript來修改CSS樣式值，從而達到修改文本顏色的目的。

搞清楚HTML、CSS和JavaScript的含義后，那么接下來我們就正式開始分析渲染模塊了。

由于渲染機制過于復雜，所以渲染模塊在執行過程中會被劃分為很多子階段，輸入的HTML經過這些子階段，最后輸出像素。我們把這樣的一個處理流程叫做渲染流水線，其大致流程如下圖所示：

按照渲染的時間順序，流水線可分為如下幾個子階段：構建DOM樹、樣式計算、布局階段、分層、繪制、分塊、光柵化和合成。內容比較多，我會用兩篇文章來為你詳細講解這各個子階段。接下來，在介紹每個階段的過程中，你應該重點關注以下三點內容

開始每個子階段都有其輸入的內容；
然后每個子階段有其處理過程；
最終每個子階段會生成輸出內容。

理解了這三部分內容，能讓你更加清晰地理解每個子階段。

二、構建DOM樹

為什么要構建DOM樹呢？這是因為瀏覽器無法直接理解和使用HTML，所以需要將HTML轉換為瀏覽器能夠理解的結構——DOM樹。

這里我們還需要簡單介紹下什么是樹結構，為了更直觀地理解，你可以參考下面我畫的幾個樹結構：

從圖中可以看出，樹這種結構非常像我們現實生活中的“樹”，其中每個點我們稱為節點，相連的節點稱為父子節點。樹結構在瀏覽器中的應用還是比較多的，比如下面我們要介紹的渲染流程，就在頻繁地使用樹結構。

接下來咱們還是言歸正傳，來看看DOM樹的構建過程，你可以參考下圖

從圖中可以看出，構建DOM樹的輸入內容是一個非常簡單的HTML文件，然后經由HTML解析器解析，最終輸出樹狀結構的DOM。

為了更加直觀地理解DOM樹，你可以打開Chrome的“開發者工具”，選擇“Console”標簽來打開控制臺，然后在控制臺里面輸入“document”后回車，這樣你就能看到一個完整的DOM樹結構，如下圖所示：

圖中的document就是DOM結構，你可以看到，DOM和HTML內容幾乎是一樣的，但是和HTML不同的是，DOM是保存在內存中樹狀結構，可以通過JavaScript來查詢或修改其內容。

那下面就來看看如何通過JavaScript來修改DOM的內容，在控制臺中輸入：

document.getElementsByTagName("p")[0].innerText = "black"

這行代碼的作用是把第一個標簽的內容修改為black，具體執行結果你可以參考下圖：

從圖中可以看出，在執行了一段修改第一個標簽的JavaScript代碼后，DOM的第一個p節點的內容成功被修改，同時頁面中的內容也被修改了

好了，現在我們已經生成DOM樹了，但是DOM節點的樣式我們依然不知道，要讓DOM節點擁有正確的樣式，這就需要樣式計算了

三、樣式計算

樣式計算的目的是為了計算出DOM節點中每個元素的具體樣式，這個階段大體可分為三步來完成

# 1. 把CSS轉換為瀏覽器能夠理解的結構

那CSS樣式的來源主要有哪些呢？你可以先參考下圖：

從圖中可以看出，CSS樣式來源主要有三種：

通過link引用的外部CSS文件
<style>標記內的 CSS
元素的style屬性內嵌的CSS
和HTML文件一樣，瀏覽器也是無法直接理解這些純文本的CSS樣式，所以當渲染引擎接收到CSS文本時，會執行一個轉換操作，將CSS文本轉換為瀏覽器可以理解的結構——styleSheets。
為了加深理解，你可以在Chrome控制臺中查看其結構，只需要在控制臺中輸入document.styleSheets，然后就看到如下圖所示的結構

從圖中可以看出，這個樣式表包含了很多種樣式，已經把那三種來源的樣式都包含進去了。當然樣式表的具體結構不是我們今天討論的重點，你只需要知道渲染引擎會把獲取到的CSS文本全部轉換為styleSheets結構中的數據，并且該結構同時具備了查詢和修改功能，這會為后面的樣式操作提供基礎

# 2. 轉換樣式表中的屬性值，使其標準化

現在我們已經把現有的CSS文本轉化為瀏覽器可以理解的結構了，那么接下來就要對其進行屬性值的標準化操作。

要理解什么是屬性值標準化，你可以看下面這樣一段CSS文本

body { font-size: 2em }
p {color:blue;}
span  {display: none}
div {font-weight: bold}
div  p {color:green;}
div {color:red; }

可以看到上面的CSS文本中有很多屬性值，如2em、blue、bold，這些類型數值不容易被渲染引擎理解，所以需要將所有值轉換為渲染引擎容易理解的、標準化的計算值，這個過程就是屬性值標準化。

那標準化后的屬性值是什么樣子的？

從圖中可以看到，2em被解析成了32px，red被解析成了rgb(255,0,0)，bold被解析成了700……

# 3. 計算出DOM樹中每個節點的具體樣式

現在樣式的屬性已被標準化了，接下來就需要計算DOM樹中每個節點的樣式屬性了，如何計算呢？

這就涉及到CSS的繼承規則和層疊規則了。

首先是CSS繼承。CSS繼承就是每個DOM節點都包含有父節點的樣式。這么說可能有點抽象，我們可以結合具體例子，看下面這樣一張樣式表是如何應用到DOM節點上的

body { font-size: 20px }
p {color:blue;}
span  {display: none}
div {font-weight: bold;color:red}
div  p {color:green;}

這張樣式表最終應用到DOM節點的效果如下圖所示：

從圖中可以看出，所有子節點都繼承了父節點樣式。比如body節點的font-size屬性是20，那body節點下面的所有節點的font-size都等于20。

為了加深你對CSS繼承的理解，你可以打開Chrome的“開發者工具”，選擇第一個“element”標簽，再選擇“style”子標簽，你會看到如下界面

這個界面展示的信息很豐富，大致可描述為如下

首先，可以選擇要查看的元素的樣式（位于圖中的區域2中），在圖中的第1個區域中點擊對應的元素元素，就可以了下面的區域查看該元素的樣式了。比如這里我們選擇的元素是標簽，位于html.body.div.這個路徑下面
其次，可以從樣式來源（位于圖中的區域3中）中查看樣式的具體來源信息，看看是來源于樣式文件，還是來源于UserAgent樣式表。這里需要特別提下UserAgent樣式，它是瀏覽器提供的一組默認樣式，如果你不提供任何樣式，默認使用的就是UserAgent樣式。
最后，可以通過區域2和區域3來查看樣式繼承的具體過程。

以上就是CSS繼承的一些特性，樣式計算過程中，會根據DOM節點的繼承關系來合理計算節點樣式。

樣式計算過程中的第二個規則是樣式層疊。層疊是CSS的一個基本特征，它是一個定義了如何合并來自多個源的屬性值的算法。它在CSS處于核心地位，CSS的全稱“層疊樣式表”正是強調了這一點。關于層疊的具體規則這里就不做過多介紹了，網上資料也非常多，你可以自行搜索學習

總之，樣式計算階段的目的是為了計算出DOM節點中每個元素的具體樣式，在計算過程中需要遵守CSS的繼承和層疊兩個規則。這個階段最終輸出的內容是每個DOM節點的樣式，并被保存在ComputedStyle的結構內。

如果你想了解每個DOM元素最終的計算樣式，可以打開Chrome的“開發者工具”，選擇第一個“element”標簽，然后再選擇“Computed”子標簽，如下圖所示：

上圖紅色方框中顯示了html.body.div.p標簽的ComputedStyle的值。你想要查看哪個元素，點擊左邊對應的標簽就可以了

四、布局階段

現在，我們有DOM樹和DOM樹中元素的樣式，但這還不足以顯示頁面，因為我們還不知道DOM元素的幾何位置信息。那么接下來就需要計算出DOM樹中可見元素的幾何位置，我們把這個計算過程叫做布局。

Chrome在布局階段需要完成兩個任務：創建布局樹和布局計算

# 1. 創建布局樹

你可能注意到了DOM樹還含有很多不可見的元素，比如head標簽，還有使用了display:none屬性的元素。所以在顯示之前，我們還要額外地構建一棵只包含可見元素布局樹。

我們結合下圖來看看布局樹的構造過程：

從上圖可以看出，DOM樹中所有不可見的節點都沒有包含到布局樹中。

為了構建布局樹，瀏覽器大體上完成了下面這些工作

遍歷DOM樹中的所有可見節點，并把這些節點加到布局中；
而不可見的節點會被布局樹忽略掉，如head標簽下面的全部內容，再比如body.p.span這個元素，因為它的屬性包含 dispaly:none，所以這個元素也沒有被包進布局樹

# 2. 布局計算

現在我們有了一棵完整的布局樹。那么接下來，就要計算布局樹節點的坐標位置了。布局的計算過程非常復雜，我們這里先跳過不講，等到后面章節中我再做詳細的介紹。

在執行布局操作的時候，會把布局運算的結果重新寫回布局樹中，所以布局樹既是輸入內容也是輸出內容，這是布局階段一個不合理的地方，因為在布局階段并沒有清晰地將輸入內容和輸出內容區分開來。針對這個問題，Chrome團隊正在重構布局代碼，下一代布局系統叫LayoutNG，試圖更清晰地分離輸入和輸出，從而讓新設計的布局算法更加簡單。