瀏覽器渲染的那些事(一)

時間 2019-11-10

原文原文鏈接

今天在推特看到一篇文章《當頁面渲染時，瀏覽器發生了什麼》，因而找了些資料，分享一下所得。html

瀏覽器的主要概念

瀏覽器主要分爲這及部分。前端

User Interfaceweb

用戶接口。瀏覽器中的地址欄、前進後退、書籤菜單等。除了網頁顯示區域之外的都是。

Brower engineshell

瀏覽器引擎。查詢與操做渲染引擎的接口。

Rendering engine數據庫

渲染引擎。今天的內容主角就是它~負責顯示請求的內容

Networking瀏覽器

網絡。用於網絡請求，例如HTTP請求。

JavaScript Interpreter網絡
```
用於解析執行JavaScript代碼
```

UI Backend佈局

繪製基礎原件，好比組合框、窗口。

Data Persistence網站

持久層。HTML5規定了完整的瀏覽器中的數據庫：web database

主要流程

Webkit主要流程以下：
ui

Mozilla的Gecko渲染引擎主要流程

由圖能夠發現，兩個引擎過程基本相同。主要有三個步驟：

解析。瀏覽器會解析HTML/SVG/XHTML，事實上，webkit有三個C++的類對應這三類文檔。瀏覽器解析這三種文件會產生一個DOM Tree；解析CSS，產生style rules；解析Javacript，主要經過DOM API和CSSOM API來操做DOM Tree和CSS Rule Tree
解析完成後，瀏覽器引擎會經過DOM Tree和CSS Rule Tree來構造Rendering Tree。
調用操做系統Native GUI的API繪製。

兩個引擎的差異在於它們起的名字不同，即語義差異：

webkit把可視化好的可視元素成爲Render Tree,用Layout來表示元素的佈局
Gecko把可視化好的可視元素成爲Frame Tree，每一個元素就是一個frame，元素的佈局成爲Reflow

固然，也不是隻有語義差異。還有一個細小的差異差異在於：
Gecko在HTML與DOM樹之間還多一個層content Sink，這是建立DOM對象的工廠。

DOM解析

解析由兩部分組成：分詞+構建樹。
HTML5規範中，HTML解析流程以下圖：

分詞是詞法分析，把輸入解析成符號序列。
構建樹的過程就是在不斷處理分詞器完成的節點。除了把元素添加到DOM樹上，還會將其添加到一個開放元素堆棧，用於糾正嵌套錯誤和標籤未關閉錯誤。
但其實瀏覽器比咱們想象的更強大更包容。瀏覽器的錯誤處理至關統一，雖然這不是當前HTML規範的一部分。當不少格式不良的HTML文檔出如今不少網站，瀏覽器會嘗試用和其餘瀏覽器同樣的方式修復錯誤。

<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>

DOM Tree解析以下：