Paul Irish是著名的前端開發(fā)工程師，同時(shí)他也是Chrome開發(fā)者關(guān)系團(tuán)隊(duì)成員，jQuery團(tuán)隊(duì)成員，Modernizr、 Yeoman、CSS3 Please和HTML5 Boilerplate的lead developer。針對(duì)大家對(duì)WebKit的種種誤解，他在自己的博客發(fā)表了《WebKit for Developers》一文，試圖為大家解惑。

　　對(duì)許多開發(fā)者來(lái)說(shuō)，WebKit就像一個(gè)黑盒。我們把HTML、CSS、JS和其他一大堆東西丟進(jìn)去，然后WebKit魔法般的以某種方式把一個(gè)看起來(lái)不錯(cuò)的網(wǎng)頁(yè)展現(xiàn)給我們。但事實(shí)上，Paul的同事Ilya Grigorik說(shuō)：

WebKit才不是個(gè)黑盒。它是個(gè)白盒。并且，它是個(gè)打開的白盒。

　　所以讓我們來(lái)花些時(shí)間了解這些事兒：

• 什么是WebKit？
• 什么不是WebKit？
• 基于WebKit的瀏覽器是如何使用WebKit的？
• 為什么又有不同的WebKit？

　　現(xiàn)在，特別是Opera宣布將瀏覽器引擎轉(zhuǎn)換為WebKit之后，我們有很多使用WebKit的瀏覽器，但是我們很難去界定它們有哪些相同與不同。下面我爭(zhēng)取為這個(gè)謎團(tuán)做些解讀。而你也將會(huì)更懂得判斷瀏覽器的不同，了解如何在正確的地方報(bào)告bug，還會(huì)了解如何在特定瀏覽器下高效開發(fā)。

　　標(biāo)準(zhǔn)Web瀏覽器組件

　　讓我們列舉一些現(xiàn)代瀏覽器的組件：

• HTML、XML、CSS、JavsScript解析器
• Layout
• 文字和圖形渲染
• 圖像解碼
• GPU交互
• 網(wǎng)絡(luò)訪問(wèn)
• 硬件加速

　　這里面哪些是WebKit瀏覽器共享的？差不多只有前兩個(gè)。其他部分每個(gè)WebKit都有各自的實(shí)現(xiàn)，所謂的“port”?，F(xiàn)在讓我們了解一下這是什么意思……

　　WebKit Ports是什么？

　　在WebKit中有不同的“port”，但是這里允許我來(lái)讓W(xué)ebKit hacker，Sencha的工程主管Ariya Hidayat來(lái)解釋：

WebKit最常見的參考實(shí)現(xiàn)是Apple在Mac OS X上的實(shí)現(xiàn)（這也是最早和最原始的WebKit庫(kù)）。但是你也能猜到，在Mac OS X下，許多不同的接口在很多不同的原生庫(kù)下被實(shí)現(xiàn)，大部分集中在CoreFoundation。舉例來(lái)說(shuō)，如果你定義了一個(gè)純色圓角的按鈕，WebKit知道要去哪里，也知道要如何去繪制這個(gè)按鈕。但是，繪制按鈕的工作最終還是會(huì)落到CoreGraphics去。

　　上面已經(jīng)提到，CoreGraphics只是Mac port的實(shí)現(xiàn)。不過(guò)Mac Chrome用的是Skia。

隨時(shí)間推移，WebKit被“port”（移植）到了各個(gè)不同的平臺(tái)，包括桌面端和移動(dòng)端。這種做法被稱作“WebKit port”。對(duì)Windows版Safari來(lái)說(shuō)，Apple通過(guò)（有限實(shí)現(xiàn)的）Windows版本CoreFoundation 來(lái)port WebKit。

　　……不過(guò)Windows版本的Safari現(xiàn)在已經(jīng)死掉了。

除此之外，還有很多很多其它的“port”（參見列表）。Google創(chuàng)建并維護(hù)著它的Chromium port。這其實(shí)也是一個(gè)基于Gtk+的WebKitGtk。諾基亞通過(guò)收購(gòu)Trolltech，維護(hù)著以QtWebKit module而聞名的WebKit Qt port。

　　讓我們看看其中一些WebKit ports：

• Safari
  • OS X Safari和Windows Safari使用的是不同的port
  • 用于OS X Safari的WebKit Nightly以后會(huì)漸漸成為一個(gè)邊緣版本
• Mobile Safari
  • 在一個(gè)私有代碼分支上維護(hù)，不過(guò)代碼現(xiàn)在正在合并到主干
  • ios Chrome（使用了Apple的WebView，不過(guò)后面的部分有很多不同）
• Chrome（Chromium）
  • 安卓Chrome（直接使用Chromium port）
  • Chromium也驅(qū)動(dòng)了Yandex Browser、 360 Browser、Sogou Browser，很快，還會(huì)有Opera。
• 還有很多： Amazon Silk、Dolphin、Blackberry、QtWebKit、WebKitGTK+、The EFL port (Tizen)、wxWebKit、WebKitWinCE……

　　不同的port專注于不同的領(lǐng)域。Mac的port注意力集中在瀏覽器和操作系統(tǒng)的分割上，允許把ObjectC和C++綁定并嵌入原生應(yīng)用的渲染。Chromium專注在瀏覽器上。QtWebKit的port在他的跨平臺(tái)GUI應(yīng)用架構(gòu)上給apps提供運(yùn)行時(shí)環(huán)境或者渲染引擎。

　　WebKit瀏覽器共享了那些東西？

　　首先，讓我們來(lái)看看這些WebKit ports的共同之處：

　?。ㄗ髡咦ⅲ汉苡幸馑迹@些內(nèi)容我寫了很多次，每次Chrome團(tuán)隊(duì)成員都給我糾正錯(cuò)誤，正如你看到的……）

1. “WebKit在使用相同的方式解析WebKit。”——實(shí)際上，Chrome是唯一支持多線程HTML解析的port。
2. “一旦解析完成，DOM樹也會(huì)構(gòu)建成相同的樣子。”——實(shí)際上Shadow DOM只有在Chromium才被開啟。所以DOM的構(gòu)造也是不同的。自定義元素也是如此。
3. “WebKit為每個(gè)人創(chuàng)建了‘window’對(duì)象和‘document’對(duì)象。”——是的，盡管它暴露出的屬性和構(gòu)造函數(shù)可以通過(guò)feature flags來(lái)控制。
4. “CSS解析都是相同的。將CSS解析為對(duì)象模型是個(gè)相當(dāng)標(biāo)準(zhǔn)的過(guò)程。”——不過(guò)，Chrome只支持-webkit-前綴，而Apple和其他的ports支持遺留的-khtml-和-apple-前綴。
5. “布局定位？這些是基本生計(jì)問(wèn)題啊”—— 盡管Sub-pixel layout和saturated layout算法是WebKit的一部分，不過(guò)各個(gè)port的實(shí)現(xiàn)效果還是有很多不同。

　　所以，情況很復(fù)雜。

　　就像Flickr和GitHub通過(guò)flag標(biāo)識(shí)來(lái)實(shí)現(xiàn)自己的功能一樣，WebKit也有相同處理。這允許各個(gè)port自行決定是否啟用WebKit編譯特性標(biāo)簽的各種功能。通過(guò)命令行開關(guān)，或者通過(guò)about:flags還可以控制是否通過(guò)運(yùn)行時(shí)標(biāo)識(shí)來(lái)展示功能特性。

　　好，現(xiàn)在讓我們?cè)賴L試一次搞清楚WebKit究竟有哪些相同…

　　每個(gè)WebKit port有哪些共同之處

• DOM、winow、document
• CSS對(duì)象模型
• CSS解析，鍵盤事件處理
• HTML解析和DOM構(gòu)建
• 所有的布局和定位
• Chrome開發(fā)工具和WebKit檢查器的UI與檢查器
• contenteditable、pushState、文件API、大多數(shù)SVG、CSS Transform math、Web Audio API、localStorage等功能
• 很多其他功能與特性

　　這些領(lǐng)域現(xiàn)在有點(diǎn)兒模糊，讓我們嘗試把事情弄得更清楚一點(diǎn)。

　　什么是WebKit port們并沒有共享的：

• GPU相關(guān)技術(shù)
  • 3D轉(zhuǎn)換
  • WebGL
  • 視頻解碼
• 將2D圖像繪制到屏幕
  • 解析方式
  • SVG和CSS漸變繪制
• 文字繪制和斷字
• 網(wǎng)絡(luò)層（SPDY、預(yù)渲染、WebSocket傳輸）
• JavaScript引擎
  • JavaScriptCore 在WebKit repo中。V8和JavaScriptCore被綁定在WebKit中。
• 表單控制器的渲染
• <video>和<audio>的元素表現(xiàn)和解碼實(shí)現(xiàn)
• 圖像解碼
• 頁(yè)面導(dǎo)航 前進(jìn)/后退
  • pushState()的導(dǎo)航部分
• SSL功能，比如Strict Transport Security和Public Key Pins

　　讓我們談?wù)勂渲械?D圖像部分： 根據(jù)port的不同，我們使用完全不同的庫(kù)來(lái)處理圖像到屏幕的繪制過(guò)程：

　　更宏觀一點(diǎn)來(lái)看，一個(gè)最近剛添加的功能：CSS.supports()在除了沒有css3特性檢測(cè)功能的win和wincairo這兩個(gè)port之外，在其它所有port中都可用。

　　現(xiàn)在到了賣弄學(xué)問(wèn)的技術(shù)時(shí)間。上面講的內(nèi)容其實(shí)并不正確。事實(shí)上那是WebCore被共享的東西。而WebCore其實(shí)是當(dāng)大家討論HTML和SVG的布局、渲染和DOM處理時(shí)提到的WebKit。技術(shù)上講，WebKit是WebCore和各種ports之間的綁定層，盡管通常來(lái)說(shuō)這個(gè)差別并不那么重要。

　　一個(gè)圖表應(yīng)該可以幫助大家理解：

　　WebKit中的許多組件都是可以更換的（圖中標(biāo)灰色的部分）。

　　舉個(gè)例子來(lái)說(shuō)，Webkit的JavaScript引擎，JavaScriptCore，是WebKit的默認(rèn)組件。（它最初是當(dāng)WebKit從KHTML分支時(shí)從KJS演變來(lái)的）。同時(shí)，Chromium port用V8引擎做了替換，還使用了獨(dú)特的DOM綁定來(lái)映射上面的組件。

　　字體和文字渲染是平臺(tái)上的重要部分。在WebKit中有兩個(gè)獨(dú)立的文字路徑：Fast和Complex。這兩者都需要平臺(tái)特性的支持，但是Fast只需要知道如何傳輸字型，而Complex實(shí)際上需要掌握平臺(tái)上所有的字符串，并說(shuō)“請(qǐng)繪制這個(gè)吧”。

"WebKit就像一個(gè)三明治。盡管Chromium的包裝更像是一個(gè)墨西哥卷。一個(gè)美味的Web平臺(tái)墨西哥卷。"

—— Dimitri Glazkov, Chrome WebKit hacker，Web Components和Shadow DOM擁護(hù)者。

　　現(xiàn)在，讓我們放寬鏡頭看看一些port和一些子系統(tǒng)。下面是WebKit的5個(gè)port；盡管它們共享了WebCore的大部分，但考慮一下它們的stack有哪些不同。

　　*ios Chrome注：你可能知道它使用 UIWebView。由于UIWebView的能力限制。它只能使用移動(dòng)版Safari的渲染層，JavaScriptCore（而不是V8）和單進(jìn)程模式。然而，大量的Chromium 代碼還是起到了調(diào)節(jié)作用 ，比如網(wǎng)絡(luò)層、同步、書簽架構(gòu)、地址欄、度量工具和崩潰報(bào)告。（同時(shí)，由于JavaScript很少成為移動(dòng)端的瓶頸，缺少JIT編譯器只有很小的影響。）

　　好吧，那么我們?cè)撛趺崔k？

　　現(xiàn)在所有WebKit完全不同了，我好怕。

　　別這樣！WebKit的layoutTests覆蓋面非常廣（據(jù)最新統(tǒng)計(jì)，有28,000個(gè)layoutTests），這些test不僅針對(duì)已存在的特性，而且針對(duì)任何發(fā)現(xiàn)的回歸。實(shí)際上，每當(dāng)你探索一些新的或難懂的DOM/CSS/HTML5特性時(shí)，在整個(gè)web平臺(tái)上，layoutTests經(jīng)常已經(jīng)有了一些奇妙的小demo。

　　另外，W3C正在努力研究一致性測(cè)試套件。這意味著我們可以期待使用同一個(gè)測(cè)試套件來(lái)測(cè)試不同的WebKit port和瀏覽器，以此來(lái)獲得更少的怪異模式，和一個(gè)帶來(lái)更少的怪癖模式和更具互操作性的web。對(duì)所有參加過(guò)Test The Web Forward活動(dòng)的人們……致謝！

　　Opera剛剛遷移到了WebKit了。會(huì)怎樣？

　　Robert Nyman和 Rob Hawkes也談到了這個(gè) ，但是我會(huì)再補(bǔ)充一些：Opera在公告中明顯指出Opera將采用Chromium。這意味著WebGL，Canvas，HTML5 表單，2D圖像實(shí)現(xiàn)——Chrome和Opera將在所有這些功能上保持一致。API和后端實(shí)現(xiàn)也會(huì)完全相同。由于Opera是基于 Chromium，你可以有足夠的信心去相信你的尖端工作將會(huì)在Chrome和Opera上獲得兼容。

　　我還應(yīng)該指出，所有的Opera瀏覽器都將采用Chromium：包括他的Windows，Mac、Linux版本，和Opera Mobile（完全成熟的移動(dòng)瀏覽器）。甚至Opera Mini都將使用基于Chromium的服務(wù)器渲染集群來(lái)替換當(dāng)前的基于Presto的服務(wù)器端渲染。

　　……那WebKit Nightly是什么？

　　它是WebKit的mac port ，和Safari運(yùn)行的二進(jìn)制文件一樣（盡管會(huì)替換一些底層庫(kù)）。因?yàn)樘O果在項(xiàng)目中起主導(dǎo)地位，所以它的表現(xiàn)和功能與Safari的總是那么一致。在很多情況下，當(dāng)其它port可能會(huì)試驗(yàn)新功能的時(shí)候，Apple卻顯得相對(duì)保守。不管怎樣，如果你想我用中學(xué)一樣的類比，想想這個(gè)好了：WebKit Nightly對(duì)于Safari就像Chromium對(duì)于Chrome。

　　同樣的，Chrome Canary 有著最新的WebKit資源。

　　告訴我更多的WebKit內(nèi)幕吧。

　　就在這兒了，小伙子：

it知識(shí)庫(kù)：開發(fā)者需要了解的WebKit，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。