摘要：文章同步到技術(shù)內(nèi)幕之頁面渲染過程最近拜讀了傳說中的技術(shù)內(nèi)幕一書，有很大收獲，尤其是對頁面渲染有了較深的認(rèn)識。解析語法分析，基于詞法解釋器生成的新標(biāo)記，構(gòu)建成抽象語法樹，解析器嘗試將其與某條語法規(guī)則進(jìn)行匹配。

文章同步到github《Webkit技術(shù)內(nèi)幕》之頁面渲染過程

最近拜讀了傳說中的《Webkit技術(shù)內(nèi)幕》一書，有很大收獲，尤其是對頁面渲染有了較深的認(rèn)識。由于功力有限，而且書中設(shè)計(jì)到較多的底層也無法理解，所以本文主要整理和分享一下自己理解的基于Webkit內(nèi)核瀏覽器的頁面渲染的整體過程，不做深入介紹(也做不了深入介紹)。

瀏覽器之所以能呈現(xiàn)出更重頁面，正是由于瀏覽器內(nèi)核的存在，也被稱為渲染引擎，主要作用就是，也就是能把HTML/CSS/JavaScript文本其相關(guān)的資源轉(zhuǎn)化轉(zhuǎn)化成可視化可交互的圖像頁面，這個過程就是渲染。

本文主要是基于Webkit內(nèi)核，所以先放一張整理Webkit架構(gòu)圖(并非全部模塊, 主要包含主要模塊),大致介紹一下Webkit的架構(gòu)

自下而上主要分為三層:

1.操作系統(tǒng)層

2.Webkit渲染過程中依賴的很多第三方模塊

3.Webkit層，主要包含webCore、渲染引擎層、嵌入式接口層，綁定層

由Webkit可以運(yùn)行在不同的操作系統(tǒng)上，瀏覽器也可以運(yùn)行在不同的操作系統(tǒng)上，另外與對磁盤和內(nèi)存的操作都需要操作系統(tǒng)來操作，所以需要操作系統(tǒng)支持。說白了就是一切需要對硬件操作的程序都需要操作系統(tǒng)的支持。

資源的獲取、頁面的渲染等需要依賴第三方庫來完成，網(wǎng)絡(luò)庫、圖形庫、視頻庫等都是Webkit之所以能工作的基礎(chǔ)，Webkit來根據(jù)需要來使用相應(yīng)的庫。

WebKitCore部分是所有瀏覽器共享的部分，是渲染網(wǎng)頁的基礎(chǔ)，包括HTML解釋器、CSS解釋器、SVG、DOM、渲染樹等

1.HTML解釋器

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

2.CSS解釋器

問DOM樹中各個元素對象計(jì)算出樣式信息，后計(jì)算后面的網(wǎng)頁布局做基礎(chǔ)

3.布局

把DOM樹和解析后的CSS樹的信息結(jié)合起來，形成一個包含頁面所有元素和樣式的信息的一個內(nèi)部表示模型

4.繪圖

使用第三方依賴的庫如2D/3D圖形庫等將布局計(jì)算后的節(jié)點(diǎn)繪制成圖像

對于JavaScript引擎有必要說一下，JavaScript引擎就是將JavaScript代碼解析處理并運(yùn)行的環(huán)境，負(fù)責(zé)整個JavaScript程序的編譯及執(zhí)行過程。

1.webkit默認(rèn)的引擎是JavaScriptCore引擎，對于不同瀏覽器對于引擎的實(shí)現(xiàn)JavaScript引擎的實(shí)現(xiàn)也不一樣，比如Chrome瀏覽器是基于V8引擎等。

2.另外在解析/語法分析，構(gòu)建出"抽象語法樹"之后，會將"抽象語法樹"進(jìn)行編譯，轉(zhuǎn)化為一組機(jī)器指令，拿一個例子來說

var a = 1

JavaScript會創(chuàng)建一個變量a，并分配內(nèi)存，將1這個值存儲在a的變量中。

3.JavaScript可以修改網(wǎng)頁內(nèi)容，也就是修改DOM和和CSS樣式，事實(shí)上，也正是javaScript代碼通過DOM和CSSOM暴露出的接口來進(jìn)行修改，從而改變頁面渲染的效果

綁定層和嵌入式接口層最主要與Webkit項(xiàng)目的移植有關(guān)，就比如基于linux內(nèi)核的CentOS、Ubuntu等系統(tǒng)一樣。嵌入式接口層主要提供給瀏覽器調(diào)用，不同瀏覽器廠商會基Webkit以及對外暴露的接口實(shí)現(xiàn)自己的功能。

從輸入url開始整體介紹一下頁面的渲染流程，然后具體步驟再詳細(xì)加以說明

1.用戶輸入url按下回車后，瀏覽器開啟一個進(jìn)程對url進(jìn)行分析，如果是http協(xié)議，按照web方式處理

2.根據(jù)域名進(jìn)行DNS解析，解析之后發(fā)送第二次get請求，進(jìn)行HTTP協(xié)議會話，以獲取資源

3.此時進(jìn)入到web服務(wù)器上的 Web Server，如 Apache、Tomcat、Node.JS 等web服務(wù)器;

4.繼續(xù)進(jìn)入后端應(yīng)用程序，如PHP、Java等找到對應(yīng)請求處理，最后由web服務(wù)器傳送給瀏覽器資源

5.因?yàn)橘Y源的位置以URL(統(tǒng)一資源定位符)來區(qū)分，發(fā)送請求時，如果本地有緩存，發(fā)送請求的同時會帶上緩存的相關(guān)信息，與服務(wù)器資源作比較，比如更新時間等，服務(wù)器如果沒有更新則返回304，直接使用緩存，否則向服務(wù)器請求資源。

5.瀏覽器開始下載HTML文檔

6.瀏覽器內(nèi)核開始解析文檔(整個html文檔就是一大串字符串)，構(gòu)建DOM樹，解析成DOM樹的過程中，如果遇到JavaScript代碼，則交給JavaScript引擎來執(zhí)行，等到DOM樹構(gòu)建完成后觸發(fā)DOMContentLoaded事件

7.解析CSS，構(gòu)建CSS樹，構(gòu)建CSSOM(在瀏覽器控制臺輸入document.styleSheets按下回車就可以看到styleSheetList的集合了)

8.CSS解析完成之后，在DOM樹的基礎(chǔ)上附加解釋后的樣式信息，形成RenderObject樹，在RenderObject節(jié)點(diǎn)創(chuàng)建的同時，webkit會根據(jù)網(wǎng)頁層次構(gòu)建出RenderLayer樹，同時構(gòu)建出一個虛擬的繪圖上下文(與平臺無關(guān)的抽象類)，最后根據(jù)繪圖上下文(需要依賴2D/3D庫)進(jìn)行繪制，最終也就是用戶看到的可交互的頁面。

上面介紹了頁面從輸入url發(fā)送請求后到頁面渲染的整體流程，下面補(bǔ)充一下在這整個過程中的一些細(xì)節(jié)知識點(diǎn)，方面更好的理解頁面的渲染過程

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

    
    


    

        
aaa
        
    

當(dāng)網(wǎng)頁構(gòu)建層次的時候，html元素為根層，此時創(chuàng)建一個層，html元素的所有子節(jié)點(diǎn)、子節(jié)點(diǎn)的子節(jié)點(diǎn)，依次類推，如dody，div，p為普通元素，并不會創(chuàng)建新的層次接口，video元素需要進(jìn)行創(chuàng)建新層來進(jìn)行視頻處理和渲染。

如下情況，都需要建立新的RenderLayer節(jié)點(diǎn)

備注: 圖片直接截取于《Webkit技術(shù)內(nèi)幕》

2.從資源字節(jié)流到構(gòu)建成DOM樹

備注: 圖片直接截取于《Webkit技術(shù)內(nèi)幕》

1.分詞/詞法分析，從字節(jié)流到字符流流(串)，是分段的詞法解釋器會將字符串解釋成標(biāo)記(相當(dāng)于字典中的詞語)

如 var a = 1; var、a、=、1 、;?？崭袷欠駮划?dāng)作詞法單元，取決于空格在
這門語言中是否具有意義。

2.解析/語法分析，基于詞法解釋器生成的新標(biāo)記，構(gòu)建成“抽象語法樹”，解析器嘗試將其與某條語法規(guī)則進(jìn)行匹配。如果發(fā)現(xiàn)了匹配規(guī)則，解析器會將一個對應(yīng)于該標(biāo)記的節(jié)點(diǎn)添加到解析樹中，然后繼續(xù)請求下一個標(biāo)記

3.HTML文檔對應(yīng)的DOM樹的對應(yīng)關(guān)系

4.DOM樹和RenderObject樹之間的對應(yīng)關(guān)系

備注: 圖片直接截取于《Webkit技術(shù)內(nèi)幕》

5. RenderObject樹與RenderLayer樹之間的對應(yīng)關(guān)系

多對一的關(guān)系，RenderObject多個節(jié)點(diǎn)可以對應(yīng)RenderLayer的一個層次結(jié)構(gòu)

備注: 圖片直接截取于《Webkit技術(shù)內(nèi)幕》

以上文章就是整理的頁面渲染整體流程，很多細(xì)節(jié)沒有具體講，比如解析html文檔時，利用棧來處理、繪制3D圖形的GPU加速等、由于能力有限不敢多講，也難講清楚，這些還是去看大神們具體的書比較，感興趣的小伙伴，《WebKit技術(shù)內(nèi)幕》了解一下

本文主要參考資料:

WebKit技術(shù)內(nèi)幕
Chrome 渲染優(yōu)化 - 層模型
前端文摘：深入解析瀏覽器的幕后工作原理