摘要：模塊和將下面的渲染機(jī)制，安全機(jī)制，插件機(jī)制等等隱藏起來，提供一個(gè)接口層。進(jìn)行網(wǎng)頁的渲染進(jìn)程，可能有多個(gè)。最后進(jìn)程將結(jié)果由線程傳遞給進(jìn)程最后，進(jìn)程接收到結(jié)果并將結(jié)果繪制出來。

這是之前在簡書上面的處女作，也搬過來了，以后就一直在 segmentfault 上面寫文章了，webkit技術(shù)內(nèi)幕-朱永盛是我大四買的書，很舊的一本書了，當(dāng)時(shí)只看了一點(diǎn)點(diǎn)，一直沒繼續(xù)看完它，現(xiàn)在才看完，，，說來慚愧。

瀏覽器中，內(nèi)核模塊（渲染引擎）作用是把HTML頁面轉(zhuǎn)變?yōu)榭梢暬?，可聽化的圖像結(jié)果。

下面我們來逐步打開渲染引擎這個(gè)黑盒：

html解釋器是將HTML文本解釋成DOM，CSS是為DOM的各個(gè)元素對(duì)象計(jì)算出樣式信息，從而為計(jì)算最后網(wǎng)頁的布局提供基礎(chǔ)，JavaScript可以解釋JavaScript代碼并通過DOM接口和CSSOM接口來修改網(wǎng)頁內(nèi)容和樣式信息

首先是網(wǎng)頁內(nèi)容，加載完輸入到HTML解釋器，解釋后構(gòu)成DOM樹，這期間如果遇到JavaScript代碼就交給JavaScript引擎去處理，如果網(wǎng)頁中包含CSS，就交給CSS解釋器；DOM樹簡歷的時(shí)候，渲染引擎接收來自CSS解釋器的樣式信息，構(gòu)建一個(gè)新的你日不會(huì)吐模型，該模型由布局模塊計(jì)算模型內(nèi)部各個(gè)元素的位置和大小信息

為了簡便起見，下文將網(wǎng)頁加載過程及渲染過程統(tǒng)稱為渲染過程，將其分為三個(gè)階段：從網(wǎng)頁URL到構(gòu)建DOM樹；構(gòu)建webkit繪圖上下文；生成最終的圖像。

第一階段較簡單可跳過，第二階段具體過程：

CSS文件被CSS解釋器解釋成內(nèi)部表示結(jié)構(gòu)

CSS解釋器工作完之后，在DOM樹構(gòu)建RenderObject樹

RenderObject節(jié)點(diǎn)仔創(chuàng)建的同時(shí)，webkit會(huì)根據(jù)網(wǎng)頁的層次結(jié)構(gòu)創(chuàng)建RenderLayer樹，同時(shí)構(gòu)建一個(gè)虛擬的繪圖上下文。

細(xì)細(xì)道來：

對(duì)于head，script，display:none等等之外的‘可視節(jié)點(diǎn)’，webkit會(huì)為他們建立相應(yīng)的RenderObject對(duì)象，一個(gè)RenderObject對(duì)象報(bào)錯(cuò)了微會(huì)之DOM借點(diǎn)所需要的各種信息，比如樣式布局信息。這些RenderObject對(duì)象和DOM節(jié)點(diǎn)對(duì)象類似，也夠成一棵新樹：RenderObject樹，HTMLDocument節(jié)點(diǎn)對(duì)應(yīng)RenderView節(jié)點(diǎn)，RenderView節(jié)點(diǎn)是RenderObject樹的根節(jié)點(diǎn)。

另外，網(wǎng)頁是有層次結(jié)構(gòu)的，webkit會(huì)創(chuàng)建相應(yīng)的RenderLayer對(duì)象，當(dāng)某些類型RenderObject節(jié)點(diǎn)或者具有某些CSS樣式的RenderObject節(jié)點(diǎn)出現(xiàn)的時(shí)候，webkit就會(huì)創(chuàng)建RenderLayer對(duì)象。所以說RenderLayer樹是基于RenderObject樹建立起來的一顆新樹，并且RenderLayer節(jié)點(diǎn)和RenderObject節(jié)點(diǎn)不是一一對(duì)應(yīng)的關(guān)系。以下情況的RenderObject節(jié)點(diǎn)需要建立新的RenderLayer節(jié)點(diǎn)：

DOM樹的Document節(jié)點(diǎn)對(duì)應(yīng)的RenderView節(jié)點(diǎn)

DOM樹中的HTML節(jié)點(diǎn)對(duì)應(yīng)的RenderBlock節(jié)點(diǎn)

顯示指定css position（not static）的RenderObject節(jié)點(diǎn)

有透明效果的RenderObject節(jié)點(diǎn)

節(jié)點(diǎn)有移除overflow，alpha或者反射效果的，v街道

使用canvas2d 3d（webgl）的RenderObject節(jié)點(diǎn)

video節(jié)點(diǎn)對(duì)應(yīng)的RenderObject節(jié)點(diǎn)

最后就是根據(jù)繪圖上下文來生成最終的圖像

chromium模塊結(jié)構(gòu)圖：

沒有Content模塊的話，也可以在Webkit的Chromium移植上渲染網(wǎng)頁內(nèi)容，但是沒有辦法獲得沙箱模型，跨進(jìn)程的GPU硬件加速機(jī)制，眾多的HTML5功能，因?yàn)檫@些功能是在Content層里面實(shí)現(xiàn)的。

Content模塊和Content API將下面的渲染機(jī)制，安全機(jī)制，插件機(jī)制等等隱藏起來，提供一個(gè)接口層。該接口目前被上層模塊或者其他項(xiàng)目使用，內(nèi)部調(diào)用者包括Chromium瀏覽器，Content Shell，外部包括Chromium Embedded Framework，Opera瀏覽器等等。

Chromium瀏覽器和Content Shell是夠健在Content API之上的兩個(gè)‘瀏覽器’，Chromium具有瀏覽器完整的功能，也就是我們編譯出來能看到的瀏覽器式樣，content Shell是使用content API來包裝的一層簡單的殼，可以使用content模塊來渲染和顯示網(wǎng)頁內(nèi)容。

content Shell的作用，其一可以測(cè)試content模塊的很多功能，比如渲染、硬件加速；其二是一個(gè)參考，被很多外部項(xiàng)目參考來開發(fā)基于content API的瀏覽器或者其他類型的項(xiàng)目。在Android上，其作用更大，因?yàn)閏hromium瀏覽器的部分代碼沒有開源，所以只能依賴于content Shell。

Android WebView其思想是利用chromium的實(shí)現(xiàn)來替換Android默認(rèn)的webview。

Browser進(jìn)程：瀏覽器主進(jìn)程，負(fù)責(zé)瀏覽器頁面的顯示，各個(gè)頁面的管理，所有其他類型進(jìn)程的祖先，負(fù)責(zé)他們的創(chuàng)建和銷毀。

Render進(jìn)行：網(wǎng)頁的渲染進(jìn)程，可能有多個(gè)。

NPAPI插件進(jìn)程

GPU進(jìn)程：最多只有一個(gè)，GPU硬件加速打開時(shí)才會(huì)被創(chuàng)建。

Pepper插件進(jìn)程

其他類型的進(jìn)程，比如Linux的Zygote進(jìn)程；Sandbox進(jìn)程。

每個(gè)進(jìn)程內(nèi)部都有很多線程，對(duì)于Browser進(jìn)程，多線程的主要目的是為了保持用戶界面的高響應(yīng)度，保證UI進(jìn)程（主線程）不會(huì)被任何其他費(fèi)時(shí)操作（比如本地文件讀寫，socket讀寫，數(shù)據(jù)庫操作）阻礙，從而影響了對(duì)用戶操作的響應(yīng)；對(duì)于Render進(jìn)程中，Chromium則不讓其他操作阻止渲染線程的快速執(zhí)行，多核的話chromium會(huì)將渲染過程管線化，可以讓渲染的不同階段在不同的線程執(zhí)行。

網(wǎng)頁加載和渲染過程在圖中模型下的基本工作方式有以下步驟：

Browser進(jìn)程受到用戶的請(qǐng)求，首先由UI線程處理，而且將相應(yīng)的任務(wù)轉(zhuǎn)給IO線程，他隨即將該任務(wù)傳遞給Render進(jìn)程

Render進(jìn)程的IO線程經(jīng)過簡單解釋后交給渲染線程，渲染線程接受請(qǐng)求，加載網(wǎng)頁并且渲染網(wǎng)頁，其中可能需要Browser進(jìn)程獲取資源和GPI進(jìn)城來幫助渲染。最后Render進(jìn)程將結(jié)果由IOS線程傳遞給Browser進(jìn)程

最后，Browser進(jìn)程接收到結(jié)果并將結(jié)果繪制出來。

本文主要是講webkit渲染模塊，若是對(duì)其他模塊有興趣的話，可以去當(dāng)當(dāng)或者京東上買來看看