【瀏覽器】渲染原理探究

前言

作爲前端，打交道最多的就是瀏覽器了，也是咱們必須熟悉的。因此接下來咱們講一下瀏覽器的渲染原理。

若是對瀏覽器的工做原理了解清楚，能夠爲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