翻譯:WebKit for Developers
Paul Irish 大濕為我們帶來(lái)了這篇開(kāi)年大作,文章深入淺出的闡述了各 Webkit port 的迥異,文筆細(xì)膩,是一篇不可多得的 Webkit 入門開(kāi)胃菜。為了讓大家第一時(shí)間更好的品嘗這道大菜,一絲特別邀請(qǐng)了幾位 Webkit 專業(yè)開(kāi)發(fā)人士作為本文的翻譯顧問(wèn),在此表示由衷的感謝!
本文涉及到非常多的專業(yè)術(shù)語(yǔ),我會(huì)盡量補(bǔ)充一些相關(guān)資料的鏈接,翻譯不當(dāng)之處,歡迎批評(píng)指正。
對(duì)于許多開(kāi)發(fā)者而言,WebKit 是一個(gè)黑盒子。我們把 HTML, CSS, JS 和一堆資源放進(jìn)去,然后 WebKit 以某種方式,奇妙地變幻出一個(gè)美觀而實(shí)用的頁(yè)面。事實(shí)上,如同我同事 Ilya Grigorik 所說(shuō) …
WebKit 它不是一個(gè)黑盒子,而是一個(gè)白盒子,并且是一個(gè)開(kāi)放的白盒子。 |
那么讓我們花一點(diǎn)時(shí)間來(lái)理清一些東西:
WebKit 是什么?
WebKit 不是什么?
基于 WebKit 的瀏覽器使如何運(yùn)用 WebKit ?
為什么所有的 WebKit 并不一樣「呢」?
雖然現(xiàn)在我們已經(jīng)有了很多基于 Webkit 的瀏覽器了,特別是有消息稱 Opera 也已經(jīng)轉(zhuǎn)移到 WebKit 了,但是想要理解他們的相同點(diǎn)和不同點(diǎn)還是挺難的。下面我將側(cè)重講這方面,你將能更好的分辨瀏覽器的差異,在合適的 bug 跟蹤系統(tǒng)提交 bug,并了解如何更加高效的針對(duì)特定的瀏覽器進(jìn)行開(kāi)發(fā)。
標(biāo)準(zhǔn)的 Web 瀏覽器組件
讓我們看一下現(xiàn)代 web 瀏覽器的幾個(gè)組件:
·解析(HTML, XML, CSS, JavaScript)
·排版(Layout)
·文字和圖像渲染
·圖像解碼
·GPU 交互
·網(wǎng)絡(luò)接入
·硬件加速
那么哪些是基于 WebKit 的瀏覽器所共享的呢? 幾乎只有前兩項(xiàng)。
其它的由各自的 WebKit port 負(fù)責(zé)。讓我們回顧下這意味著什么? WebKit Port 雖然 Webkit 有不同的 ”port”,但請(qǐng)?jiān)试S我引用來(lái)自 Sencha 的 WebKit hacker 兼 eng 主管— Ariya Hidayat 解釋一下 :
WebKit 最常見(jiàn)的參考實(shí)現(xiàn)是 Apple 自己的運(yùn)行在 Mac OS X 上的WebKit 實(shí)現(xiàn)(這也是最早最原始的 WebKit 庫(kù))。正如你所知,在 Mac OS X 上各種接口的實(shí)現(xiàn)使用不同的本地庫(kù),大多集中在CoreFoundation 。比如,你定義了一個(gè)帶有特別的圓角的平面彩色按鈕,那么 WebKit 會(huì)知道在哪里以及如何畫(huà)繪制這個(gè)按鈕??墒?,最終實(shí)際畫(huà)繪制按鈕的職責(zé)(作為用戶顯示器上的像素)還是落到了 CoreGraphics 身上。
如上所述,只有 Apple 自己在 Mac 上的實(shí)現(xiàn)是使用 CG。Chrome 在 Mac 上的實(shí)現(xiàn)使用的是 Skia。
隨著時(shí)間推移,WebKit 被移植到不同的平臺(tái),包括桌面和移動(dòng)端。這種做法通常被稱作“一個(gè) WebKit port”。對(duì)于 Safari 瀏覽器的 Windows 版本,Apple 也把自己的 WebKit 移植到 Windows 上,同時(shí)使用 Windows 版(閹割版)的 CoreFoundation 庫(kù)。
盡管 Windows 版 Safari 現(xiàn)在掛了 。
此外,還有許多其他的”port”(查看全部的列表)。Google 創(chuàng)建了一個(gè)持續(xù)維護(hù)的 Chromium port。還有,這是基于 GTK + 的 WebKitGtk。Nokia(通過(guò)它收購(gòu)的 Trolltech 公司)維護(hù) Qt 的 WebKit 移植版本,一般叫做QtWebKit 模塊。(譯者注:后來(lái)又便宜賣了,現(xiàn)在 Qt 屬于 Digia 公司)
一些 WebKit port
Safari
OS X 版和 Windows 版的 Safari 是兩個(gè)不同的 port
用于 Safari 的 WebKit nightly 將會(huì)慢慢成為一個(gè)邊緣化的版本……
Mobile Safari
一開(kāi)始在內(nèi)部的私有分支上維護(hù),不過(guò)最近代碼也合并回主干(being upstreamed)。(譯者注:upstream 是開(kāi)源項(xiàng)目的術(shù)語(yǔ),指其它人或者公司從主干代碼開(kāi)出來(lái)的私有分支的代碼重新提交回主干)
iOS 版的 Chrome(使用 Apple 的 WebView;后面有更多關(guān)于它的不同之處)
Chrome (Chromium)
安卓版 Chrome (直接使用 Chromium port)
Chromium 也驅(qū)動(dòng) Yandex 瀏覽器 ,360 瀏覽器 ,搜狗瀏覽器 (譯者注:其實(shí)國(guó)內(nèi)的殼瀏覽器太多了,你懂的)等,以及將來(lái)的 Opera。
Android 瀏覽器
使用目前最新的 WebKit 代碼
還有很多 port :Amazon Silk(亞馬遜 Silk 瀏覽器), Dolphin(海豚瀏覽器),Blackberry(黑莓瀏覽器),QtWebKit,WebKitGTK+,EFL port (Tizen),wxWebKit,WebKitWinCE 等等。
不同的 port 可以有不同的側(cè)重點(diǎn)。Mac port 關(guān)注的是瀏覽器內(nèi)核和操作系統(tǒng)相關(guān)的實(shí)現(xiàn)部分的分離,它通過(guò) Obj-C 和 C++ 代碼把(WebKit)渲染引擎嵌入到本地應(yīng)用中。 Chromium 則更多關(guān)注瀏覽器本身。而 QtWebKit 則把它的 WebKit 實(shí)現(xiàn)作為一個(gè)運(yùn)行時(shí)的庫(kù)或者渲染引擎,同其跨平臺(tái) GUI 應(yīng)用程序框架一起提供給其它應(yīng)用使用。
那么哪些是所有 WebKit 瀏覽器共享的呢?
首先,讓我們回顧一下所有 WebKit port 的共同點(diǎn)。
這很有趣,我試著寫(xiě)了幾次。每次都會(huì)被 Chrome 團(tuán)隊(duì)成員斧正,下面你就會(huì)看到了…… |
1. 首先,WebKit 以同樣的方式解析 HTML 。好吧,除了 Chromium,它是迄今為止唯一支持 threaded HTML 解析的 port(譯者注:Last week in WebKit: Threaded HTML parser and background blending)。
2.然而一經(jīng)解析,DOM 樹(shù)構(gòu)造依然相同。所以,實(shí)際上只有在 Chromium port 中 Shadow DOM 被打開(kāi)的情況下, DOM 結(jié)構(gòu)才會(huì)改變。當(dāng)然這同樣適用于自定義元素。
3. WebKit 都會(huì)創(chuàng)建了一個(gè) window 對(duì)象和 document 對(duì)象。使得通過(guò)它暴露出來(lái)的屬性和構(gòu)造器(譯者注:某種函數(shù))可以在 feature flags 選擇打開(kāi)。
4.CSS解析基本是一樣的,把你的 CSS 文件解析成(內(nèi)部的)CSS 對(duì)象模式還是一個(gè)比較標(biāo)準(zhǔn)的過(guò)程。是的,盡管 Chrome 僅接受 -webkit- 前綴,然而 Apple 和其它的 port 接受遺留前綴像 -khtml- 和 -apple-。
5.排版,定位?好吧,也來(lái)點(diǎn)面包和黃油吧!Sub-pixel layout 和 saturated layout (譯者注:已經(jīng)添加鏈接)算法是 WebKit 的一部分,但是各 port 之間存在差異。
6. 好極了(搞定了)。
所以,事情很復(fù)雜。
就像 Flickr 和 Github 通過(guò) flags 標(biāo)識(shí)實(shí)現(xiàn)特性,WebKit 也是這么做的。允許 port 通過(guò) WebKit 的編譯特性標(biāo)識(shí) , 啟用或禁用各種功能。這些特性可以作為運(yùn)行時(shí)標(biāo)識(shí)被暴露,也可以通過(guò)命令行開(kāi)關(guān)(Chromium 是這樣) ,或者通過(guò)配置 about:flags 。
好吧,讓我們重新歸納下各 WebKit 的共同點(diǎn)……
#p#
WebKit port 的共同點(diǎn)
·DOM,window, document
·大致相同
·CSSOM
·CSS 解析,屬性/值處理
無(wú)供應(yīng)商前綴處理
·HTML 解析和 DOM 結(jié)構(gòu)
如果我們只考慮 Web 組件,它是相同的
·所有的布局和定位
Flexbox,浮動(dòng),塊級(jí)格式化上下文… 所有這些都是共享的
·Chrome DevTools ( WebKit Inspector) 的 UI 和各種工具
盡管去年4月以來(lái),Safari 為 Safari Inspector 放棄了自有的非 Webkit 的閉源 UI
·contenteditable, pushState,F(xiàn)ile API,大部分的 SVG,CSS Transform 公式, Web Audio API,localStorage
特性盡管后端不同。每一個(gè) port 的 localStorage 可能使用不同的存儲(chǔ)層,Web Audio API 可能使用不同的 audio API
哪些是各 WebKit port 不同的
·運(yùn)行在 GPU 上的
3D變換
WebGL
視頻解碼
·屏幕上的 2D 繪圖
抗鋸齒方法
SVG & CSS 漸變渲染
·文字渲染&斷字
·網(wǎng)絡(luò)堆棧(SPDY,預(yù)渲染,WebSocket 傳輸)
·JavaScript 引擎
JavaScriptCore 在 WebKit repo. 它和 V8 綁定在 WebKit 里
·表單控件渲染
·<video> & <audio> 元素行為(以及編解碼器支持)
·圖像解碼
·導(dǎo)航 前進(jìn)/后退
pushState() 的導(dǎo)航部分
·SSL 特性像嚴(yán)格傳輸安全性(Strict Transport Security)和公鑰
看下面這些: 2D 圖形方面依賴于不同的 port ,我們用完全不同的庫(kù)把它繪制到屏幕上:
或者更微觀一點(diǎn),最近的新特性:CSS.supports() 除了 win 和 wincairo, 所有的 port 都可用 ,同時(shí)它們沒(méi)有啟用 css3 conditional (css3 特性檢測(cè))特性。
既然我們了解了這些,是時(shí)候更加深入一些了。事實(shí)上以上的敘述是不正確的。 WebCore 是共享的,WebCore 是一個(gè)針對(duì) HTML 和 SVG 的排版、渲染和文檔對(duì)象模型(DOM)的庫(kù),它就是人們通常所說(shuō)的 WebKit 。實(shí)際上“WebKit ”是 WebCore 和 port 的綁定層,盡管在扯淡時(shí)這種區(qū)別是不重要的。
下圖應(yīng)該有所幫助:
WebKit 里面許多的組件是可交換的(上圖灰色區(qū)域)。
舉個(gè)例子,起初,WebKit 的默認(rèn) JavaScript 引擎是 JavaScriptCore 。(它基于最初的 KJS (源于 KDE),WebKit 開(kāi)始只是 KHTML 的一個(gè) fork 分支)。后來(lái),Chromium port 替換為 V8,然后使用獨(dú)立的 DOM 綁定機(jī)制映射上去就完事了。
字體和文本渲染占一個(gè)平臺(tái)的很大一部分。WebKit 有2個(gè)單獨(dú)的文本路徑:快速(Fast)和復(fù)雜(Complex)。兩者都需要平臺(tái)特定(port-side)的支持,但快速(Fast)僅需要知道如何 blit glyphs (傳輸字形)(WebKit 為平臺(tái)做了緩存),而復(fù)雜(Complex)實(shí)際上是傳遞整個(gè)字符串到平臺(tái)層,然后說(shuō)“繪制這個(gè)吧”。
WebKit 像一個(gè)三明治。盡管在 Chromium 中更像墨西哥玉米卷。一個(gè)美味的 web 平臺(tái)玉米卷。”——Dimitri Glazkov,Chrome WebKit hacker,Web 組件和 Shadow DOM 的擁護(hù)者。 |
現(xiàn)在,讓我們放大鏡頭看看一些 port 和一些子系統(tǒng)。下面是 WebKit 的5個(gè) port;盡管它們共享WebCore 的大部分,但它們的 stacks 是不同的。
* iOS 版 Chrome 注解:你可能知道它使用 UIWebView,由于 UIWebView 的能力意味著它只能使用像移動(dòng)版 Safari 那樣的渲染層,JavaScriptCore (替代 V8),單進(jìn)程模式。盡管如此,大量的 Chromium 代碼起銜接作用 ,例如網(wǎng)絡(luò)層,同步和書(shū)簽基礎(chǔ)設(shè)施,地址欄,度量和崩潰報(bào)告。(同時(shí),更重要的是,JavaScript 很少成為移動(dòng)端的瓶頸,缺乏 JIT 編譯器(譯者注:詳細(xì)資料)只有很小的影響。)
好吧,那么我們?cè)撛趺崔k?
現(xiàn)在所有 WebKit 完全不同了,我表示弱弱的害怕。
沒(méi)必要!WebKit 的 layoutTests 覆蓋面非常廣(最新統(tǒng)計(jì)是28,000 個(gè) layoutTests),不僅針對(duì)已存在的特性,而且針對(duì)任何發(fā)現(xiàn)的回歸。實(shí)際上,每當(dāng)你探索一些新的或難懂的 DOM/CSS/HTML5 特性時(shí),layoutTests 常常已經(jīng)有了奇妙的最小化的示例。
此外,W3C 正在努力研究一致性測(cè)試套件 。這意味著我們可以期待不同的 WebKit port 和所有瀏覽器使用同樣的測(cè)試套件測(cè)試,帶來(lái)更少的怪癖模式和更彼此協(xié)作的網(wǎng)絡(luò)。所有參加過(guò) Test The Web Forward 大會(huì)(譯者注:比如去年在北京的分會(huì)場(chǎng)) 同時(shí)為此做出努力的人們,再次表示感謝。
Opera 剛剛轉(zhuǎn)移到 WebKit了。有何影響呢?
Robert Nyman 和 Rob Hawkes 也談到了這個(gè) ,但是我得補(bǔ)充一下:Opera 公告的一個(gè)明顯的部分是 Opera 將采用 Chromium。這意味著 WebGL,Canvas,HTML5 表單,2D 圖像實(shí)現(xiàn)——所有這些 Chrome 和 Opera 將保持一致。同樣的 APIs,同樣的后端實(shí)現(xiàn)。由于 Opera 是基于 Chromium,你可以深感自信,你未來(lái)的工作可以同時(shí)兼容 Chrome 和 Opera 。
我也應(yīng)該指出所有的 Opera 瀏覽器 將采用 Chromium。因此 Windows,Mac 和 Linux 版 Opera,以及 Opera Mobile(完全成熟的移動(dòng)瀏覽器)。甚至 Opera Mini 輕客戶端,將使用基于 Chromium 的渲染替換當(dāng)前的基于 Presto 的服務(wù)器端渲染。
WebKit Nightly 是神馬?
它是 WebKit 的一個(gè) mac port ,內(nèi)部運(yùn)行跟 Safari 一樣的二進(jìn)制文件(盡管會(huì)替換一些底層庫(kù))。因此它的行為和特性跟 Safari 全一樣。如果你想回到從前,可以考慮它……總之,WebKit Nightly 與 Safari 的關(guān)系就如 Chromium 與 Chrome 的關(guān)系。 Chrome Canary 包含最進(jìn)一兩天之內(nèi)的 WebKit 資源。
還想了解更多 WebKit 的細(xì)節(jié)。
英文原文: http://paulirish.com/2013/webkit-for-developers/
原文作者:Paul Irish
翻譯:金龍Along