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

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

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

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

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

自下而上主要分為三層:

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

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

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

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

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

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

1.HTML解釋器

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

2.CSS解釋器

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

3.布局

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

4.繪圖

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

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

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

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

var a = 1

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

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

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

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

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

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

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

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

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

5.瀏覽器開(kāi)始下載HTML文檔

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

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

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

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

1. 首先理解頁(yè)面是分層次的，比如說(shuō)如下代碼片段代碼

    
    


    

        
aaa
        
    

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

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

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

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

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

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

如 var a = 1; var、a、=、1 、;。空格是否會(huì)被當(dāng)作詞法單元，取決于空格在
這門(mén)語(yǔ)言中是否具有意義。

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

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

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

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

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

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

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

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

本文主要參考資料:

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