《Webkit技術內幕》之頁面渲染過程

時間 2019-11-05

標籤 Webkit技術內幕頁面渲染過程简体版

原文原文鏈接

最近拜讀了傳說中的《Webkit技術內幕》一書，有很大收穫，尤爲是對頁面渲染有了較深的認識。因爲功力有限，並且書中設計到較多的底層也沒法理解，因此本文主要整理和分享一下本身理解的基於Webkit內核瀏覽器的頁面渲染的總體過程，不作深刻介紹(也作不了深刻介紹)。

瀏覽器內核

瀏覽器之因此能呈現出更重頁面，正是因爲瀏覽器內核的存在，也被稱爲渲染引擎，主要做用就是，也就是能把HTML/CSS/JavaScript文本其相關的資源轉化轉化成可視化可交互的圖像頁面，這個過程就是渲染。

四大主流內核

內核	瀏覽器	內核識別碼
Trident	IE、360	-ms
Gecko	Firefox(火狐)	-moz
presto	Opera(歐朋)	-o
Webkit	Chrome(谷歌) safari(蘋果)	-webkit

Webkit架構

本文主要是基於Webkit內核，因此先放一張整理Webkit架構圖(並不是所有模塊, 主要包含主要模塊),大體介紹一下Webkit的架構前端

自下而上主要分爲三層:java

1.操做系統層
2.Webkit渲染過程當中依賴的不少第三方模塊
3.Webkit層，主要包含webCore、渲染引擎層、嵌入式接口層，綁定層

1.操做系統層

由Webkit能夠運行在不一樣的操做系統上，瀏覽器也能夠運行在不一樣的操做系統上，另外與對磁盤和內存的操做都須要操做系統來操做，因此須要操做系統支持。說白了就是一切須要對硬件操做的程序都須要操做系統的支持。linux

2.第三方模塊層

資源的獲取、頁面的渲染等須要依賴第三方庫來完成，網絡庫、圖形庫、視頻庫等都是Webkit之因此能工做的基礎，Webkit來根據須要來使用相應的庫。git

3. WebKitCore

WebKitCore部分是全部瀏覽器共享的部分，是渲染網頁的基礎，包括HTML解釋器、CSS解釋器、SVG、DOM、渲染樹等github

1.HTML解釋器

解釋HTML文本的解釋器，把html文檔解析成DOM(文檔對象模型)樹，表示整個html文檔

2.CSS解釋器

問DOM樹中各個元素對象計算出樣式信息，後計算後面的網頁佈局作基礎

3.佈局

把DOM樹和解析後的CSS樹的信息結合起來，造成一個包含頁面全部元素和樣式的信息的一個內部表示模型

4.繪圖

使用第三方依賴的庫如2D/3D圖形庫等將佈局計算後的節點繪製成圖像

4. JavaScript引擎

對於JavaScript引擎有必要說一下，JavaScript引擎就是將JavaScript代碼解析處理並運行的環境，負責整個JavaScript程序的編譯及執行過程。web

1.webkit默認的引擎是JavaScriptCore引擎，對於不一樣瀏覽器對於引擎的實現JavaScript引擎的實現也不同，好比Chrome瀏覽器是基於V8引擎等。後端

2.另外在解析/語法分析，構建出"抽象語法樹"以後，會將"抽象語法樹"進行編譯，轉化爲一組機器指令，拿一個例子來講瀏覽器

var a = 1

JavaScript會建立一個變量a，並分配內存，將1這個值存儲在a的變量中。緩存

3.JavaScript能夠修改網頁內容，也就是修改DOM和和CSS樣式，事實上，也正是javaScript代碼經過DOM和CSSOM暴露出的接口來進行修改，從而改變頁面渲染的效果

5. 綁定層和嵌入式接口層

綁定層和嵌入式接口層最主要與Webkit項目的移植有關，就好比基於linux內核的CentOS、Ubuntu等系統同樣。嵌入式接口層主要提供給瀏覽器調用，不一樣瀏覽器廠商會基Webkit以及對外暴露的接口實現本身的功能。

頁面渲染過程

從輸入url開始總體介紹一下頁面的渲染流程，而後具體步驟再詳細加以說明

1.用戶輸入url按下回車後，瀏覽器開啓一個進程對url進行分析，若是是http協議，按照web方式處理
2.根據域名進行DNS解析，解析以後發送第二次get請求，進行HTTP協議會話，以獲取資源
3.此時進入到web服務器上的 Web Server，如 Apache、Tomcat、Node.JS 等web服務器;
4.繼續進入後端應用程序，如PHP、Java等找到對應請求處理，最後由web服務器傳送給瀏覽器資源
5.由於資源的位置以URL(統一資源定位符)來區分，發送請求時，若是本地有緩存，發送請求的同時會帶上緩存的相關信息，與服務器資源做比較，好比更新時間等，服務器若是沒有更新則返回304，直接使用緩存，不然向服務器請求資源。
5.瀏覽器開始下載HTML文檔
6.瀏覽器內核開始解析文檔(整個html文檔就是一大串字符串)，構建DOM樹，解析成DOM樹的過程當中，若是遇到JavaScript代碼，則交給JavaScript引擎來執行，等到DOM樹構建完成後觸發DOMContentLoaded事件
7.解析CSS，構建CSS樹，構建CSSOM(在瀏覽器控制檯輸入document.styleSheets按下回車就能夠看到styleSheetList的集合了)
8.CSS解析完成以後，在DOM樹的基礎上附加解釋後的樣式信息，造成RenderObject樹，在RenderObject節點建立的同時，webkit會根據網頁層次構建出RenderLayer樹，同時構建出一個虛擬的繪圖上下文(與平臺無關的抽象類)，最後根據繪圖上下文(須要依賴2D/3D庫)進行繪製，最終也就是用戶看到的可交互的頁面。

頁面渲染細節

上面介紹了頁面從輸入url發送請求後到頁面渲染的總體流程，下面補充一下在這整個過程當中的一些細節知識點，方面更好的理解頁面的渲染過程

1. 首先理解頁面是分層次的，好比說以下代碼片斷代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <p>aaa</p>
        <video src="xxx.mp4"></video>
    </div>
</body>
</html>

當網頁構建層次的時候，html元素爲根層，此時建立一個層，html元素的全部子節點、子節點的子節點，依次類推，如dody，div，p爲普通元素，並不會建立新的層次接口，video元素須要進行建立新層來進行視頻處理和渲染。

以下狀況，都須要創建新的RenderLayer節點