WebKit 粗解

對一些開發者而言，WebKit就是一個黑盒子。丟進去HTML、CSS、JS等一連串的東西，而WebKit就能變魔術一般顯示出一個很棒的網頁出來。實際上，正我的同事IlyaGroriks提到的:

WebKit不但是白盒，而且是一個開放的白盒。

讓我們花點時間來理解以下這些問題:

什麼是WebKit?
什麼不是WebKit?
瀏覽器是如何使用WebKit的?
爲什麼WebKit分支各不相同?

最近連Opera都轉到WebKit平臺上。下面的內容可以讓你能夠識別瀏覽器間的差異，去到合適的tracker上報Bug, 同時可以瞭解如何更有效的在各個瀏覽器上開發。

標準的瀏覽器組件

以下是現代瀏覽器的一些組件:

· 解析(Parsing) (HTML, XML, CSS, JavaScript)

· 排版(Layout)

· 渲染(Text and graphics rendering)

· 圖片解碼(Image decoding)

· 圖形加速(GPU interaction)

· 網絡訪問(Network access)

· 硬件加速(Hardware acceleration)

只有前兩項是被所有WebKit瀏覽器所共享的。其它的部分由不同的WebKit ports來實現。什麼意思?

WebKit的移植版本(Ports)

現在有很多WebKit的移植版本，先看一下WebKit hacker（也是Sencha的Director）Ariya Hidayat的解釋:

WebKit最爲公認的參考是Apple自己運行在Mac OS X上的分支,也是最初和原裝的WebKit庫。在Mac OS X上不，圍繞着CoreFundation等不同的原生系統庫實現出了不同的接口。比如讓WebKit之所以知道如何繪製出一個帶有圓角的flat button,其實最終是由CoreGraphics負責的。

在Mac移值版本上使用的是CoreGraphics(CG)，Mac上的Chrome則使用的是Skia。

WebKit不斷地被移植到不同的平臺上，包括桌面版本和Mobile版本,它們通常被稱爲一從此WebKit port。Apple自己也基於CoreFoundation庫的Windows版本移植了一份Windows版本的WebKit。

…不過Windows版的Safari已經死去.

除此之外，還有許多其它的ports (完整列表)。Google創建並維護着Chromium port。還有基於Gtk+的WebKitGtk。Nokia (實際上是Trolltech)維護着Qt port,就是知名的QtWebKitmodule.

WebKit ports介紹

· Safari

o Safari的OS X版本和Windows版本是兩個不同的移植版本。

o WebKitnightly是基於Safari的Mac OS版本的。稍後詳述……

· Mobile Safari

o 是專屬維護的分支，但隨後就成了主流版本。

o Chrome on iOS(使用的是Apple提供的 WebView，隨後會說明它們的不同部分)

· Chrome (Chromium)

o Chrome onAndroid (直接使用Chromiumport)

o Yandex Browser, 360 Browser, Sogou Browser使用Chromium,還有Opera.

· Android Browser

o 緊跟WebKit的最新版本。

· 更多的移值版本: Amazon Silk, Dolphin, Blackberry, QtWebKit,WebKitGTK+, EFL port (Tizen), wxWebKit, WebKitWinCE等。

不同port的關注不同。Mac port關於於將瀏覽器從系統中分離，引入Obj-C和C++的綁定(binding)以方便在應用中使用WebKit渲染引擎。Chromium則純粹關注於瀏覽器。QtWebKit則爲其跨平臺應用提供運行時或渲染引擎。

WebKit瀏覽器的共性

所有WebKit ports的共性包括以下部分。(這段作者寫了多次，每次都有Chrome工程加以糾正，各項後面的斜體部分。)

1. WebKit用相同的方式解析HTML。目前只有Chromium支持了多線程的HTML解析(threaded HTMLparsing) .

2. 使用相同的方式構建DOM Tree. 實際上只有Chromium支持Shadow DOM。

3. WebKit都會創建一個window 對象和document 對象。 不過可用的屬性和建構函數可以通過功能選項來控制。

4. CSS解析。儘管如此，還是應當讓你的CSS遵循CSSOM標準。 Chrome接受-webkit-前綴，相對的Apple和其它ports則接受-khtml-或 –apple-前綴.

5. 排版(Layout)和定位(positioning)。 WebKit包括了Sub-pixel排版和對比排版(saturated layout) 算法但每個port的實現是不同的。

6. 基礎是相同的。

就像Flickr和Github透過flags來指定實現的功能，WebKit允許通過指定編譯期功能選項(WebKit’scompile-time Feature Flags)來啓用和禁用一系列的功能。還有運行時標誌來管理一些功能，通過命令行（command lineswitches (Chromium’s here) 或配置的方式(如about:flags)指定。

WebKit port共性列表

· DOM, window, document

· CSSOM

· CSS解析, property/value處理

o sans vendorprefix handling

· HTML parsing and DOM construction

o same if wesuspended belief in Web Components

· 排版與定位

o Flexbox,Floats, block formatting contexts… all shared

· Chrome開發工具,也稱爲WebKit Inspector.

o 去年四月開始，Safari開始使用自己的Safari Inspector.

· 部分功能，如Content Editable, Push State, File API,大部分SVG API, CSS Transform math, Web Audio API, Local Storage

o 後臺(backend)並不相同.比如不同的port會爲local storage和Web Audio API使用不同的實現方法。

· 其它一些功能和特性

WebKit ports不同的部分

· GPU的運用

o 3D Transforms

o WebGL

o Video解碼(decoding)

· 2D繪製

o Anti-aliasing方法

o SVG & CSS梯度渲染(gradientrendering)

· 文本渲染和斷字處理(rendering & hyphenation)

· Network stack (SPDY,預讀(pre-rendering), WebSocket transport)

· JavaScript引擎

o WebKit中的JSC(也支持V8)，以及Chrome中的V8。

· 表格(forms)的渲染

· 音頻和視頻元素的行爲 (包括codec的支持)

· 圖片解碼(Image decoding)

· 導航(Navigating back/forward)

o pushState()的導航部分

· SSL特性(Strict Transport Security和Public Key Pins)

下圖是2D graphics 在不同port中的依賴關係，幾乎是各自使用了完全不同的庫來實現繪製操作:

舉一個更細節的例子，一個剛被引入的特性CSS.supports()只有win和wincairo兩個移植版本沒有支持,因爲它們並沒有啓用css3特性。

簡單地說共享的組件就是WebCore。它其實就是通常意義上大家所說的WebKit，一個排版、渲染引擎，同時是HTML和SVG解析庫。而WebKit是WebCore與ports之間的綁定層(bindinglayer)，平時的交流並不太在意它。

如下圖所示:

WebKit中的許多元件是可以替換的 (上圖中的灰色部分)。

比如WebKit的默認JavaScript引擎JSC(JavaScriptCore,當由KHTML開始創建WebKit的同時基於KDE的KJS實現而來),在Chromium port由V8替換，並用獨特的DOM bindings。(關於DOM Binding可以參考這裏。)

字體和文字的渲染也嚴重依賴於平臺。WebKit中有兩種不同Text Path: Fast and Complex。每一項都需要平臺(port-side)支持。Fast只需要知道如何貼上位圖輪廓(blit glyphs)就可以了，WebKit會爲平臺準備數據。而Complex則完全依賴於平臺去處理，它僅僅請求:”請畫出這個”。

“WebKit就像一個三明治，而 Chromium更像一個墨西哥玉米卷(taco)。” Dimitri Glazkov, ChromeWebKit hacker. Web Components和Shadow DOM的擁護者。

(爲什麼是taco,看這裏就可以了.)

下表中列出了5個WebKit port的塊圖，瞭解一下它們之間的異同。

-	Chrome (OS X)	Safari (OS X)	QtWebKit	Android Browser	Chrome for iOS
Rendering	Skia	CoreGraphics	QtGui	Android stack/Skia	CoreGraphics
Networking	Chromium network stack	CFNetwork	QtNetwork	Fork of Chromium’s network stack	Chromium stack
Fonts	CoreText via Skia	CoreText	Qt internals	Android stack	CoreText
JavaScript	V8	JavaScriptCore	JSC (V8 is used elsewhere in Qt)	V8	JavaScriptCore (without JITting) *

* 注意iOS上的Chrome使用的是系統控件UIWebView，因此它只能使用和Mobile Safari一樣的渲染引擎(rendering layers)，以及JavaScriptCore和單進程模型(single-process model)。當然 Chromium還是有它的應用的，諸如網絡層(network layer),同步和書籤的基礎組件(sync and bookmarks infrastructure), Omnibox,metrics及崩潰報告(crashreporting). (之所值得這樣做，是因爲 JavaScript很少會成爲移動端的瓶頸，而帶有JIT的編譯器的影響也會很小。)

WebKit瀏覽器間差異之大，何去何從？

大可不必！WebKit中提供了LayoutTest提供了大量的測試用例(28,000),不但針對已存在的功能，還包括迴歸測試。事實上，無論你何時發現了一些新奇的DOM/CSS/HTML5特性，LayoutTest通常已經提供了一個簡化版的演示。(參考:深入分析LayoutTest)

另外W3C也正增加其在頁面一致性測試上的投入。這表示不同的WebKit ports和所有瀏覽器會針對相同的頁面進行測試，將帶來更少的私有特性(quirks)和更多可以共同操作的頁面。

Opera將如何轉換？

Robert Nyman和Rob Hawkes都分析過了,但值得注意的是Opera會採用Chromium。這表示WebGL, Canvas, HTML5 forms, 2D graphics等實現會和Chrome一樣。相同的APIst和相同的後臺(backends)實現。所以Opera是Chromium-based, Opera與Chrome會保持同步兼容。