瀏覽器渲染過程與原理淺析（一）

時間 2019-11-17

標籤瀏覽器渲染過程原理淺析欄目瀏覽器简体版

原文原文鏈接

我爲啥要知道瀏覽器渲染過程，嗯...面試會問....但最重要的是瞭解它工做原理，讓你在弄它時，遊刃有餘。

先看下瀏覽器有什麼。html

瀏覽器的主要組件爲：html5

用戶界面 - 除了瀏覽器主窗口顯示的您請求的頁面外，其餘顯示的各個部分都屬於用戶界面。
瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。
呈現引擎 - 負責顯示請求的內容。若是請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。
網絡 - 用於網絡調用，好比 HTTP 請求。其接口與平臺無關，併爲全部平臺提供底層實現。
用戶界面後端 - 用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。
JavaScript 解釋器-用於解析和執行 JavaScript 代碼。
數據存儲-這是持久層。瀏覽器須要在硬盤上保存各類數據，例如cookie。瀏覽器還支持諸如localStorage，IndexedDB，WebSQL和FileSystem之類的存儲機制。

瀏覽器（如Chrome）運行渲染引擎的多個實例時：每一個選項卡都在單獨的進程中運行。

從網絡請求到HTML數據，並顯示頁面的流程：

當網頁訪問並接受到返回數據時，瀏覽器會嘗試解析（爲HTML）。

獲取返回的數據流後，第一步進行讀取解析，後面會進行的編譯HTML到DOM佈局呈現，這都是呈現引擎須要作的事情。

呈現引擎所作的事：

對於呈現引擎來講，這是漸進的過程。在不斷接收和處理來自網絡的其他內容的同時，呈現引擎會將部份內容解析並顯示出來。
面試

瀏覽器內核不一樣，解析的流程有可能會不同（以WebKit與Mozilla 的 Gecko 爲例）：

能夠看到 Gecko 解析的流程多於WebKit,並在官方的術語上有着些許不一樣，另外呈現樹與DOM樹不必定相同，後面會作說明。

HTML解析器的輸出「解析樹」是由 DOM 元素和屬性節點構成的樹結構，DOM 是文檔對象模型 (Document Object Model) 的縮寫。也會有外部內容（例如 JavaScript）與 HTML 元素之間的接口。

一個HTML的例子來講明DOM樹：

<html>   
 <body>
    <p>       
     Hello World        
    </p>        
    <div><img src="example.png"/></div>    
    </body>
</html>複製代碼

生成的DOM樹：

HTML 的標記化算法：

在呈現引擎中，爲了構建DOM樹，HTML解析器須要使用標記化算法，對HTML文檔進行解析。

標記化算法是將HTML文檔輸出爲HTML標記，並使用狀態來表示。每一個狀態收來自輸入信息流的一個或多個字節，並根據這些字節更新下一個狀態。

該算法至關複雜，因而咱們基於一個簡單的例子來理解其原理：

<html>    
    <body>        
     Hello world    
    </body>
</html>複製代碼

初始狀態是數據狀態。在<html>中，當解析遇到字符 < 時，狀態更改成「標記打開狀態」，接受一個a-z字符會建立「起始標記」。

這個狀態一直會保持到接收 > 字符。在此期間接收的每一個字符都會附加到新的標記名稱上。

遇到 > 標記以後，會發送當前的標記，狀態改成「數據狀態」。<body> 標記也會是相同的處理。

目前 html與body 標記均已發出，如今咱們回到了數據狀態，當接收 Hello world 中的H字符時，將建立併發送字符標記，此後每個字符都會發送一個字符標記。直到遇到</body>的 < 字符爲止。

</body> 中解析到< 時，狀態回到了「標記打開狀態」，接收的是/字符時，會建立 end tag token 並改成「標記名稱狀態」。這個狀態將會繼續保持，直到遇到 > 字符時結束。

</html> 也會進行一樣的處理。算法

HTML的樹構建算法：

在建立解析器的同時，也會建立 Document 對象。在構建樹階段，以 Document 爲根節點DOM樹會不斷的修改，向其中添加各類元素。

利用標記生成器( 標記化算法 )發送的每一個節點的DOM 樹，會不斷進行處理。規範( W3C標準 )中定義了每一個標記所對應的DOM元素，這些元素會在接受到相應的標記時建立。

這些元素不只會添加到DOM 樹中，還會添加到開放元素的堆棧中。此堆棧用於糾正嵌套錯誤和處理未關閉的標記。

其算法也能夠用狀態機來描述，這些狀態爲「插入模式」，

例子：

<html>    
    <body>        
    Hello world    
    </body>
</html>複製代碼

此HTML構建樹流程：

解析結束後的操做：

此階段，瀏覽器會將文檔標註爲交互狀態，並開始解析那些處於延遲模式的腳本(如: <script defer="defer" >)，也就是那些應在文檔解析完成後才執行的腳本。而後，文檔狀態將設置爲「完成」，一個「加載」事件將隨之觸發。

在 HTML5 規範中查看標記化和樹構建的完整算法

瀏覽器的容錯機制:

你在瀏覽 HTML 網頁時歷來不會看到「語法無效」的錯誤。這是由於瀏覽器會糾正任何無效內容，而後繼續工做。

不一樣瀏覽器的錯誤處理機制是至關一致的，但這種機制卻不是 HTML 當前規範的一部分。

須要注意，除非想做爲反面教材出現容錯代碼段，不然還請編寫格式正確的 HTML 代碼。

瀏覽器渲染過程與原理淺析（二）咱們會詳細說一下神祕的CSS解析器與解析器的原理，細緻的探討樣式與DOM 的關係。後端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。