最近自從Google推出Chrome瀏覽器之后，瀏覽器受到人們更加廣泛的關(guān)注，網(wǎng)上時(shí)而會(huì)出現(xiàn)這樣那樣的評(píng)價(jià)，作為一個(gè)瀏覽器內(nèi)核愛(ài)好者，希望能乘著大家都關(guān)注的東風(fēng)，能對(duì)瀏覽器內(nèi)核有更深入的理解，進(jìn)而能更好的進(jìn)行Web開(kāi)發(fā)及利用。

Chrome瀏覽器的代碼量其實(shí)是非常龐大的，要想對(duì)其有深入的理解，僅僅編譯編譯調(diào)試調(diào)試，是很難深入下去的。讓我們還是從其主要部分如多進(jìn)程管理通信、WebKit、V8、Skia、WinHttp、Sanbox等著手分析其主要流程及數(shù)據(jù)結(jié)構(gòu)，或許能達(dá)到事半功倍的效果，而WebKit是其中非常重要的一部分，是Chrome的核心引擎部分，其他部分都是基于它來(lái)集成的，深入了解了WebKit，對(duì)Chrome的理解就會(huì)迎刃而解，再說(shuō)WebKit作為一個(gè)相對(duì)獨(dú)立的瀏覽器引擎在Safari、iPhone、Adobe AIR等中都有應(yīng)用，非常值得大家深入的研究研究。

就像前面的文章所說(shuō)，WebKit主要包括三個(gè)部分WebCore、JavascriptCore及Ports部分，讓我們先從WebCore部分出發(fā)吧。。。。

一、WebCore所包含的主要內(nèi)容
1、從源代碼目錄結(jié)構(gòu)來(lái)看
WebCore目錄主要包括如下目錄：
bindings?包含將Dom Binding給JavascriptCore方面的代碼，同時(shí)包含依據(jù)idl接口描述文件，自動(dòng)生成對(duì)應(yīng)于JavascriptCore的Binding實(shí)現(xiàn)的腳本等內(nèi)容；

bridge?主要包含NPPlugin方面的接口訪(fǎng)問(wèn)等內(nèi)容；

css?主要包括與css方面相關(guān)的內(nèi)容如解析、不同css規(guī)則的定義與實(shí)現(xiàn)、css Binding給JS的接口定義等內(nèi)容；

dom?主要包括dom方面相關(guān)的內(nèi)容如不同dom元素的定義與實(shí)現(xiàn)、dom Binding給JS的接口定義等內(nèi)容；

html?主要包括html方面相關(guān)的內(nèi)容如不同html元素的定義與實(shí)現(xiàn)、HTMLTokenizer及HTMLParser等內(nèi)容；

loader?主要包括裝載資源如html頁(yè)面、css、js及image等方面內(nèi)容；

page?主要包括描述一個(gè)Web頁(yè)面所涉及的內(nèi)容如page、frame、frameview、frametree、setting、history、chrome、chromeclient等內(nèi)容；

rendering?主要包括如何使用樣式，組織布局、顯示html元素等方面內(nèi)容；

plugins?主要包括瀏覽端如何實(shí)現(xiàn)NPPlugin方面的內(nèi)容；

svg?主要包括與svg方面相關(guān)的內(nèi)容；

xml?主要包括與xml方面相關(guān)的內(nèi)容如xml parser、XPath、XSLT等；

platform?主要包括與不同平臺(tái)或外部庫(kù)相關(guān)的內(nèi)容如graphics(圖形輸出方面)、network(網(wǎng)絡(luò)處理方面)、image-decoders(解析不同圖片格式方面)等；

2、主要數(shù)據(jù)結(jié)構(gòu)
為了更加簡(jiǎn)單有效的描述瀏覽網(wǎng)頁(yè)的內(nèi)容及過(guò)程，WebKit為了明顯區(qū)分不同方面的內(nèi)容，采取了不同的namespace如webcore、javascriptcore、webkit等，webcore方面的主要數(shù)據(jù)結(jié)構(gòu)有：
webcore::page、webcore::frame、webcore::FrameLoader、webcore::FrameView、Document、DOMWindow、KJSProxy、DocumentLoader、ResourceHandle、ResourceRequest、ResouceResponse、MainResourceLoader、RenderObject、RenderView等；主要數(shù)據(jù)結(jié)構(gòu)描述如下：


WebView及WebFrame與page、frame之間的關(guān)系

圖一

FrameLoader、DocumentLoader、DocLoader類(lèi)結(jié)構(gòu)

圖二

主要Document類(lèi)結(jié)構(gòu)

圖三

FrameView類(lèi)主要結(jié)構(gòu)

圖四

總的說(shuō)來(lái)，WebCore包含了瀏覽器引擎的核心部分如處理html、dom、css、svg、獲取資源、渲染頁(yè)面過(guò)程控制、回調(diào)/通知外殼程序以及與Javascript實(shí)現(xiàn)的Binding等等；

二、一個(gè)Http請(qǐng)求在WebCore中的主要流程

1、當(dāng)調(diào)用webkit_web_view_open(url)時(shí)會(huì)觸發(fā)core(webView)->mainFrame()->loader()->load(uri)(即調(diào)用FrameLoader.load)來(lái)發(fā)起一個(gè)Http頁(yè)面請(qǐng)求；

FrameLoader.load方法的主要處理過(guò)程如圖：

圖五

2、一旦發(fā)起ResourceHandle::start，就會(huì)由網(wǎng)絡(luò)庫(kù)向web服務(wù)器發(fā)起一個(gè)http請(qǐng)求；

3、而MainResourceLoader作為一個(gè)ResouceHandleClient，提供了諸如didReceiveData()、didReceiveResponse()等回調(diào)接口以供網(wǎng)絡(luò)庫(kù)調(diào)用，一旦從web服務(wù)器獲得相關(guān)數(shù)據(jù)后網(wǎng)絡(luò)庫(kù)部分則會(huì)調(diào)用相關(guān)接口如didReceiveData等；

4、MainResouceLoader::didReceiveData的主要回調(diào)處理過(guò)程如下圖：

圖六

5、通過(guò)回調(diào)didReceiveData()方法，進(jìn)而調(diào)用Node.attach()方法，這樣就會(huì)解析生成document，同時(shí)會(huì)創(chuàng)建frameview、domwindow等；

6、創(chuàng)建的frameview會(huì)觸發(fā)layoutTimerFired時(shí)間Timer，進(jìn)而調(diào)用layout()方法，從而觸發(fā)RenderObject的創(chuàng)建、布局等，同時(shí)或許會(huì)invalidateRect，進(jìn)而觸發(fā)操作系統(tǒng)圖形庫(kù)的paint消息事件；

7、由程序主消息處理循環(huán)接收paint消息事件，進(jìn)而獲取對(duì)應(yīng)frame，獲取或創(chuàng)建GraphicContext，然后調(diào)用frame->view()->paint(&ctx,...)，從而觸發(fā)對(duì)應(yīng)RenderObject樹(shù)進(jìn)行重畫(huà)處理，這樣一個(gè)完整的頁(yè)面就會(huì)逐步的顯示出來(lái)。


三、網(wǎng)絡(luò)庫(kù)、圖形庫(kù)、Javascript實(shí)現(xiàn)與WebCore的集成

為方便擴(kuò)展及模塊化，WebCore在處理瀏覽頁(yè)面的過(guò)程中，往往使用了類(lèi)似java或gecko中接口的概念，一般先定義一組公共接口或基類(lèi)，然后由不同模塊來(lái)實(shí)現(xiàn)。

如網(wǎng)絡(luò)處理部分由WebCore提供一個(gè)ResourceHandle類(lèi)，而在不同的目錄如cf、curl、qt、soup、win等中在不同網(wǎng)絡(luò)庫(kù)的支持下對(duì)ResourceHandle類(lèi)提供不同的實(shí)現(xiàn)，待編譯時(shí)擇機(jī)選擇對(duì)應(yīng)目錄下的實(shí)現(xiàn)，這種方式從架構(gòu)的角度看比較簡(jiǎn)單，但往往不能讓程序同時(shí)使用多個(gè)網(wǎng)絡(luò)庫(kù)，進(jìn)而由程序動(dòng)態(tài)切換使用不同網(wǎng)絡(luò)庫(kù)實(shí)現(xiàn)，而gecko在xpcom的基礎(chǔ)上提供了對(duì)于這種擴(kuò)展形式的支持；其中Chrome對(duì)ResouceHanle類(lèi)的實(shí)現(xiàn)基于WinHttp網(wǎng)絡(luò)庫(kù)。

同樣WebCore對(duì)圖形庫(kù)的集成，也是采取這種方式來(lái)實(shí)現(xiàn)，如由WebCore提供一個(gè)GraphicsContext類(lèi)，然后在不同的目錄如cairo、cg、qt、win、wx中在不同的圖形庫(kù)支持下對(duì)GraphicsContext提供不同的實(shí)現(xiàn)。其中Chrome對(duì)GraphicsContext類(lèi)的實(shí)現(xiàn)基于Skia圖形庫(kù)。

WebCore中實(shí)現(xiàn)的dom、html、svg、css等，往往需要通過(guò)一定的方式輸出給Javascript的實(shí)現(xiàn)如JavascriptCore、V8，以便JS Engineer能認(rèn)識(shí)這些dom元素等，并且能調(diào)用其中的方法，這種方式叫做Binding，為了便于將WebCore中相對(duì)固定的dom、html、svg、css接口等極其方便的Binding出去，WebKit使用了極其高效及神奇的方式來(lái)實(shí)現(xiàn)。

首先定義一組非標(biāo)準(zhǔn)的idl接口，然后通過(guò)運(yùn)行一組perl腳本如generate-bindings.pl、CodeGenerator.pm、CodeGeneratorJS.pm等，就可根據(jù)idl接口定義，生成一組符合指定Javascript實(shí)現(xiàn)規(guī)則的腳本對(duì)象類(lèi)。這樣極大的減輕了開(kāi)發(fā)人員的投入及編碼錯(cuò)誤的發(fā)生。

這一點(diǎn)與gecko中將不同的xpcom接口Binding給Javascript實(shí)現(xiàn)有本質(zhì)上的差別，在gecko中通過(guò)xpconnect及一組classinfo來(lái)維護(hù)原生元素與JS對(duì)象之間的關(guān)系，不同原生元素對(duì)應(yīng)的JS對(duì)象的創(chuàng)建及屬性方法的Binding完全依賴(lài)于xpconnect的實(shí)現(xiàn)及classinfo的定義，要添加刪除修改Binding的屬性與方法，只需修改classinfo；而WebKit中Binding，相對(duì)簡(jiǎn)單明了，不同原生元素對(duì)應(yīng)的JS對(duì)象的屬性與方法由idl接口文件來(lái)定義，而具體實(shí)現(xiàn)則交給威力強(qiáng)大的generate-bindings.pl來(lái)對(duì)應(yīng)生成實(shí)現(xiàn)的代碼，這樣編譯時(shí)就可以輕松實(shí)現(xiàn)Binding。。。

四、參考資源

The WebKit Open Source Project

總結(jié)

以上是生活随笔為你收集整理的浅谈WebKit之WebCore的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。