前言
做爲前端，打交道最多的就是瀏覽器了，也是我們必須熟悉的。所以接下來我們講一下瀏覽器的渲染原理。
如果對瀏覽器的工作原理了解清楚，可以爲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