【瀏覽器】渲染原理探究

HSvng發表於2019-04-04
瀏覽器

前言

做為前端，打交道最多的就是瀏覽器了，也是我們必須熟悉的。所以接下來我們講一下瀏覽器的渲染原理。

如果對瀏覽器的工作原理了解清楚，可以為web效能優化提供方向以及理論依據。

先上很多人都見過的一幅圖：

瀏覽器渲染機制

瀏覽器的主要功能

瀏覽器的主要功能就是向伺服器發出請求，在瀏覽器視窗中展示您選擇的網路資源。這裡所說的資源一般是指 HTML 文件，也可以是 PDF、圖片或其他的型別。資源的位置由使用者使用 URI（統一資源標示符）指定。

瀏覽器解釋並顯示 HTML 檔案的方式是在 HTML 和 CSS 規範中指定的。這些規範由網路標準化組織 W3C（全球資訊網聯盟）進行維護。多年以來，各瀏覽器都沒有完全遵從這些規範，同時還在開發自己獨有的擴充套件程式，這給網路開發人員帶來了嚴重的相容性問題。如今，大多數的瀏覽器都是或多或少地遵從規範。

瀏覽器的主要構成

  • 使用者介面(User Interface) － 包括位址列、後退/前進按鈕、書籤目錄等，也就是你所看到的除了用來顯示你所請求頁面的主視窗之外的其他部分。
  • 瀏覽器引擎(Browser Engine) － 用來查詢及操作渲染引擎的介面。
  • 渲染引擎(Rendering Engine) － 用來顯示請求的內容，例如，如果請求內容為html，它負責解析html及css，並將解析後的結果顯示出來。
  • 網路(Networking) － 用來完成網路呼叫，例如http請求，它具有平臺無關的介面，可以在不同平臺上工作。
  • JS直譯器(JS Interpreter) － 用來解釋執行JS程式碼。
  • UI後端(UI Backend) － 用來繪製類似組合選擇框及對話方塊等基本元件，具有不特定於某個平臺的通用介面，底層使用作業系統的使用者介面。
  • 資料儲存(DB Persistence) － 屬於持久層，瀏覽器需要在硬碟中儲存類似cookie的各種資料，HTML5定義了web database技術，這是一種輕量級完整的客戶端儲存技術。

瀏覽器的渲染過程

1. HTML解析，構建DOM

瀏覽器解析HTML，構建DOM樹。 解析HTML到構建出DOM當然過程可以簡述如下：

Bytes → characters → tokens → nodes → DOM
複製程式碼

其中比較關鍵的幾個步驟：

1. Conversion轉換：瀏覽器將獲得的HTML內容（Bytes）基於他的編碼轉換為單個字元
2. Tokenizing分詞：瀏覽器按照HTML規範標準將這些字元轉換為不同的標記token。每個token都有自己獨特的含義以及規則集
3. Lexing詞法分析：分詞的結果是得到一堆的token，此時把他們轉換為節點物件，這些物件分別定義他們的屬性和規則 
4. DOM構建：因為HTML標記定義的就是不同標籤之間的關係，這個關係就像是一個樹形結構一樣
例如：body物件的父節點就是HTML物件，然後段落p物件的父節點就是body物件
複製程式碼

事實上，構建DOM的過程中，不是等所有Token都轉換完成後再去生成節點物件，而是一邊生成Token一邊消耗Token來生成節點物件。換句話說，每個Token被生成後，會立刻消耗這個Token建立出節點物件。注意：帶有結束標籤標識的Token不會建立節點物件。

還有兩點需要特別注意的地方。第一，DOM 樹解析的過程是一個深度優先遍歷，即先構建當前節點的所有子節點，再構建下一個兄弟節點。第二，若遇到 JavaScript 標籤，則 DOM 樹的構建會暫停，直至指令碼執行完畢。

2. 解析CSS，生成CSS規則樹

同理，CSS規則樹的生成也是類似。

Bytes → characters → tokens → nodes → CSSOM
複製程式碼

在這一過程中，瀏覽器會確定下每一個節點的樣式到底是什麼，並且這一過程其實是很消耗資源的。因為樣式你可以自行設定給某個節點，也可以通過繼承獲得。在這一過程中，瀏覽器得遞迴 CSSOM 樹，然後確定具體的元素到底是什麼樣式。

同時，解析 CSS 規則樹時 js 執行將暫停，直至 CSS 規則樹就緒。

注意：CSS匹配HTML元素是一個相當複雜和有效能問題的事情。所以，DOM樹要小，CSS儘量用id和class，千萬不要過渡層疊下去。

3. 合併DOM樹和CSS規則，生成render樹

當我們生成 DOM 樹和 CSSOM 樹以後，就需要將這兩棵樹組合為渲染樹。 一般來說，渲染樹和DOM樹是相對應的，但不是嚴格意義上的一一對應,因為有一些不可見的DOM元素不會插入到渲染樹中，如head這種不可見的標籤或者display: none等。

4. 佈局render樹（Layout/reflow），負責各元素尺寸、位置的計算

佈局：通過渲染樹中渲染物件的資訊，計算出每一個渲染物件的位置和尺寸。 Layout：也稱為Reflow，即迴流。一般意味著元素的內容、結構、位置或尺寸發生了變化，需要重新計算樣式和渲染樹。

5. 繪製render樹（paint），繪製頁面畫素資訊

繪製階段：系統會遍歷呈現樹，並呼叫呈現器的“paint”方法，將呈現器的內容顯示在螢幕上。 Repaint：即重繪。意味著元素髮生的改變只是影響了元素的一些外觀之類的時候（例如，背景色，邊框顏色，文字顏色等），此時只需要應用新樣式繪製這個元素就可以了。

後記： 小夥伴們，如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果覺得本文還不錯，記得點個贊哦！ 本文首發地址為： Vae's Blog

相關文章