WebKit技術內幕

WebKit技術內幕（瀏覽器核心|渲染引擎| HTML5| Chromium專案Committer重磅作品）

朱永盛 著  

ISBN 978-7-121-22964-0

2014年6月出版

定價：79.00元

456頁

16開

編輯推薦

WebKit作為支援HTML5的主流渲染引擎，近年來備受前端開發者關注。本書將揭示WebKit總體架構、網頁渲染原理，及其對硬體與最新技術的高效利用，以及高效能Web實踐等，內容涉及Web前端所有重要話題。

√本書作者為Chromium貢獻者，及開源專案Crosswalk初創人。

√每一主題均涵蓋基本定義、內部原理及其對Web前端開發實踐的啟示。

√剖析WebKit如何對HTML5諸項技術提供支援，包括：網路、CSS和佈局、2D/3D圖形影像、硬體加速渲染、JavaScript引擎、多媒體、混合程式設計、安全機制等。

√詳解Web前端領域所涉及的各種效能瓶頸，以及針對問題的應對之策。

√結合目前最熱門的移動技術，分析WebKit在移動領域的發展，以及移動領域為最前沿Web應用與Web執行環境帶來的機遇。

√探討Web前端未來的可能發展方向，包括向不同應用場景和應用領域的滲透。

 

內容提要

《WebKit技術內幕》從炙手可熱的HTML5 的基礎知識入手，重點闡述目前應用最廣的渲染引擎專案——WebKit。不僅著眼於系統描述WebKit 內部渲染HTML 網頁的原理，並基於Chromium 的實現，闡明渲染引擎如何高效地利用硬體和最新技術，而且試圖透過對原理的剖析，向讀者傳授實現高效能Web 前端開發所需的寶貴經驗。

《WebKit技術內幕》首先從總體上描述WebKit 架構和組成，而後涵蓋Web 前端和所有與之相關的重要技術，包括網路、資源載入、HTML 和CSS 解析、渲染樹、佈局、硬體加速、JavaScript 引擎、多媒體、移動支援、外掛機制、安全機制、除錯和最新的Web 平臺等。對於每一項技術，在介紹基本含義之上，詳細分析WebKit 內部的工作原理，進而從實踐角度道出由此帶來的Web 前端開發啟示。

目錄

第1章　瀏覽器和瀏覽器核心     1

1.1  瀏覽器   1

1.1.1  瀏覽器簡介         1

1.1.2  瀏覽器特性         4

1.1.3  HTML  5

1.1.4　使用者代理和瀏覽器行為    8

1.1.5  實踐：瀏覽器使用者代理    9

1.2  瀏覽器核心及特性        11

1.2.1  核心和主流核心         11

1.2.2  核心特徵    12

1.3  WebKit核心   15

1.3.1  WebKit介紹         15

1.3.2  WebKit和WebKit2      16

1.3.3  Chromium核心：Blink       18

1.4  本書結構        18

第2章　HTML網頁和結構  21

2.1  網頁構成        21

2.1.1  基本元素和樹狀結構         21

2.1.2  HTML5新特性    23

2.2  網頁結構        25

2.2.1  框結構         25

2.2.2  層次結構    27

2.2.3  實踐：理解網頁結構         29

2.3  WebKit的網頁渲染過程        31

2.3.1  載入和渲染         31

2.3.2  WebKit的渲染過程    32

2.3.3  實踐：從網頁到視覺化結果    35

第3章　WebKit架構和模組         39

3.1  WebKit架構及模組        39

3.1.1  獲取WebKit         39

3.1.2  WebKit架構         40

3.1.3  WebKit原始碼結構    43

3.2  基於Blink的Chromium瀏覽器結構   45

3.2.1  Chromium瀏覽器的架構及模組       45

3.2.2  實踐：從Chromium程式碼結構和執行狀態理解現代瀏覽器 56

3.3  WebKit2  61

3.3.1  WebKit2架構及模組  61

3.3.2  WebKit和WebKit2嵌入式介面          62

3.3.3  比較WebKit2和Chromium的多程式模型以及介面       63

第4章　資源載入和網路棧          65

4.1  WebKit資源載入機制   65

4.1.1  資源    65

4.1.2  資源快取    67

4.1.3  資源載入器         68

4.1.4  過程    69

4.1.5  資源的生命週期         70

4.1.6  實踐：資源的快取    71

4.2  Chromium多程式資源載入 74

4.2.1  多程式         74

4.2.2  工作方式和資源共享         76

4.3  網路棧   78

4.3.1  WebKit的網路設施    78

4.3.2  Chromium網路棧       78

4.3.3  磁碟本地快取    84

4.3.4  Cookie機制         88

4.3.5  安全機制    90

4.3.6  高效能網路棧    90

4.3.7  實踐：Chromium網路工具和資訊  97

4.4  實踐：高效的資源使用策略        99

4.4.1  DNS和TCP連線         99

4.4.2  資源的數量         99

4.4.3  資源的資料量    100

第5章　HTML直譯器和DOM模型    101

5.1  DOM模型      101

5.1.1  DOM標準   101

5.1.2  DOM樹       104

5.2  HTML直譯器          107

5.2.1  解釋過程    107

5.2.2  詞法分析    110

5.2.3  XSSAuditor驗證詞語  111

5.2.4  詞語到節點         111

5.2.5  節點到DOM樹  113

5.2.6  網頁基礎設施    114

5.2.7  執行緒化的直譯器         117

5.2.8  JavaScript的執行        119

5.2.9  實踐：理解DOM樹  120

5.3  DOM的事件機制  121

5.3.1  事件的工作過程         122

5.3.2  WebKit的事件處理機制    123

5.3.3  實踐：事件的傳遞機制    125

5.4  影子（Shadow）DOM  127

5.4.1  什麼是影子DOM       127

5.4.2  WebKit的支援    128

5.4.3  實踐：使用影子DOM       129

第6章　CSS直譯器和樣式佈局  131

6.1  CSS基本功能          131

6.1.1  簡介    131

6.1.2  樣式規則    134

6.1.3  選擇器         135

6.1.4  框模型         136

6.1.5  包含塊（Containing Block）模型      139

6.1.6  CSS樣式屬性      139

6.1.7  CSSOM（CSS Object Model）    140

6.1.8  實踐：理解CSSOM和選擇器   141

6.2  CSS直譯器和規則匹配          143

6.2.1  樣式的WebKit表示類        143

6.2.2  解釋過程    146

6.2.3  樣式規則匹配    148

6.2.4  實踐：樣式匹配         149

6.2.5  JavaScript設定樣式   151

6.3  WebKit佈局   152

6.3.1  基礎    152

6.3.2  佈局計算    153

6.3.3  佈局測試    155

第7章　渲染基礎          157

7.1  RenderObject樹    157

7.1.1  RenderObject基礎類 157

7.1.2  RenderObject樹 162

7.2  網頁層次和RenderLayer樹 163

7.2.1  層次和RenderLayer物件  163

7.2.2  構建RenderLayer樹  165

7.3  渲染方式        167

7.3.1  繪圖上下文（GraphicsContext）     167

7.3.2  渲染方式    169

7.4  WebKit軟體渲染技術   172

7.4.1  軟體渲染過程    172

7.4.2  Chromium的多程式軟體渲染技術  177

7.4.3  實踐：軟體渲染過程         180

第8章　硬體加速機制          183

8.1  硬體加速基礎        183

8.1.1  概念    183

8.1.2  WebKit硬體加速設施         185

8.1.3  硬體渲染過程    189

8.1.4  3D圖形上下文   193

8.2  Chromium的硬體加速機制 194

8.2.1  GraphicsLayer的支援         194

8.2.2  框架    196

8.2.3  命令緩衝區         200

8.2.4  Chromium合成器（Chromium Compositor）  202

8.2.5  實踐：減少重繪         213

8.3  其他硬體加速模組        216

8.3.1  2D圖形的硬體加速機制   216

8.3.2  WebGL          223

8.3.3  CSS 3D變形         228

8.3.4  其他    229

8.3.5  實踐：Chromium的支援  229

第9章　JavaScript引擎        231

9.1  概述        231

9.1.1  JavaScript語言   231

9.1.2  JavaScript引擎   238

9.1.3  JavaScript引擎和渲染引擎        241

9.2  V8引擎  242

9.2.1  基礎    242

9.2.2  工作原理    246

9.2.3  繫結和擴充套件         258

9.3  JavaScriptCore引擎       259

9.3.1  原理    259

9.3.2  架構和模組         259

9.3.4  記憶體管理    265

9.3.5  繫結    266

9.3.6  比較JavaScriptCore和V8 266

9.4  實踐——高效的JavaScript程式碼 266

9.4.1  程式設計方式    266

9.4.2  例子    268

9.4.3  未來    271

第10章　外掛和JavaScript擴充套件          273

10.1  NPAPI外掛   274

10.1.1  NPAPI簡介        274

10.1.2  WebKit和Chromium的實現   275

10.2  Chromium PPAPI外掛 284

10.2.1  原理  284

10.2.2  結構和介面       285

10.2.3  工作過程  288

10.2.4  Native Client      294

10.3  JavaScript引擎的擴充套件機制         297

10.3.1  混合程式設計  297

10.3.2  JavaScript擴充套件機制 299

10.4  Chromium擴充套件機制    303

10.4.1  原理  303

10.4.2  基本設施  306

10.4.3  訊息傳遞機制  309

第11章　多媒體   311

11.1  HTML5的多媒體支援          311

11.2  影片      313

11.2.1  HTML5影片      313

11.2.2  WebKit基礎設施      315

11.2.3  Chromium影片機制         317

11.2.4  字幕  328

11.2.5  影片擴充套件  330

11.3  音訊      331

11.3.1  音訊元素  331

11.3.2  Web Audio 334

11.3.3  MIDI和Web MIDI    336

11.3.4  Web Speech       337

11.4  WebRTC        339

11.4.1  歷史  339

11.4.2  原理和規範       341

11.4.3  實踐——一個WebRTC例子   342

11.4.4  WebKit和Chromium的實現   345

第12章　安全機制       353

12.1  網頁安全模型      353

12.1.1  安全模型基礎  353

12.1.2  WebKit的實現  363

12.2  沙箱模型      366

12.2.1  原理  366

12.2.2  實現機制  367

第13章　移動WebKit  373

13.1  觸控和手勢事件 373

13.1.1  HTML5規範      373

13.1.2  工作原理  377

13.1.3  啟示和實踐       381

13.2  移動化使用者介面 382

13.3  其他機制      384

13.3.1  新渲染機制       384

13.3.2  其他機制  387

第14章　除錯機制       389

14.1  Web Inspector      389

14.1.1  基本原理  389

14.1.2  協議  391

14.1.3  WebKit內部機制      395

14.1.4  Chromium開發者工具     398

14.1.5  遠端除錯  400

14.1.6  Chromium Tracing機制    402

14.2  實踐——基礎和效能除錯 404

14.2.1  基礎除錯  404

14.2.2  效能除錯  408

第15章　Web前端的未來   411

15.1  趨勢      411

15.2  嵌入式應用模式 414

15.2.1  嵌入式模式       414

15.2.2  CEF    414

15.2.3  Android WebView      417

15.3  Web應用和Web執行環境         419

15.3.1  Web應用  419

15.3.2  Web執行環境  421

15.4  Cordova專案        423

15.5  Crosswalk專案    425

15.6  Chromium OS和Chrome的Web應用        429

15.6.1  基本原理  429

15.6.2  其他Web作業系統 431

參考資料         435

作者簡介

朱永盛，Chromium專案Committer，2006年從南京大學畢業後就職於英特爾亞太研發有限公司，專注於HTML5、WebKit和Chromium等方面技術，參與過多個瀏覽器和Web執行環境專案，並向業界大會和技術愛好者做過多次技術分享。2013年開始初創Android系統上的Web執行環境的開源專案——Crosswalk。個人部落格：blog.csdn.net/milado_nju

媒體評論

WebKit是一個非常成功的專案，它不僅僅是渲染引擎，而且成功的推動了網路的發展。

基於WebKit渲染引擎的瀏覽器專案Chromium，成為率先支援HTML5功能和創新功能的標杆。

完整理解一個Web渲染引擎和瀏覽器並不容易，其包含眾多複雜功能。

WebKit專案和Chromium專案（不包括該專案依賴的眾多第三方專案）的程式碼量在500萬行以上，而這些程式碼很多並沒有完善文件，理解工作其原理異常困難。

前言

隨著HTML5的快速發展和網路時代的到來，Web的接入口——瀏覽器越來越重要，而作為瀏覽器的核心——渲染引擎也變成了熱門話題。自筆者接觸HTML5技術和瀏覽器以來，深深地被這一包含眾多非凡技術的新領域所吸引，並由此產生了很多疑問，為此，我開始了漫長的學習和研究WebKit（及Blink）渲染引擎和Chromium瀏覽器的征程。雖然WebKit專案本身非常複雜，但是其簡單的程式碼結構、清晰的邏輯給我留下了深刻的印象，因為在這些複雜技術的背後，竟然也可以使用良好的設計去解決技術的複雜性。而基於WebKit的Chromium專案更是將眾多大膽的新技術引入到了瀏覽器領域，讓人耳目一新。

WebKit是一個非常成功的專案，它不僅僅是個渲染引擎，而且成功地推動了網路的發展。基於WebKit渲染引擎的瀏覽器專案Chromium，更是成為率先支援HTML5功能和創新新功能的標杆。要完整理解一個Web渲染引擎和瀏覽器並不容易，因為它們的確包含了眾多複雜的功能。據筆者的統計，WebKit專案和Chromium專案（不包括該專案依賴的眾多第三方專案）的程式碼量都在500萬行以上，而這些程式碼很多並沒有完善的文件，所以理解這些技術背後的工作原理還是非常困難的。

隨著學習的深入，筆者發現目前對於整個渲染引擎的分析和文件化還處於一個缺失的狀態。同時，因為渲染引擎和瀏覽器包含了太多的技術，讓人有點應接不暇的感覺。雖然WebKit專案程式碼結構簡單，但是由於文件的缺失，愛好者對於每一項新技術，也經常有不知從何下手的感覺。為此，筆者結合自身的理解，透過這本書系統性地分析這一領域的眾多技術，希望能幫助讀者快速度過迷茫的時期。

本書的讀者

本書主要是為Web愛好者準備的一本書，主要針對Web前端開發者、瀏覽器開發者、Web平臺開發者和其他一切對HTML5技術、WebKit渲染引擎和Chromium瀏覽器的工作原理感興趣的讀者。對於Web前端開發者而言，筆者一直認為，如果使用HTML5技術來編寫網頁或者Web應用，瞭解其背後的工作原理是寫出高效程式碼的有效捷徑。就像開發者想編寫高效C++程式碼，需要理解C++編譯器背後的原理一樣，因為只有這樣，開發者才能夠編寫出高效能的程式碼。對於瀏覽器開發者來說，本書著重介紹現在非常熱門的WebKit（及Blink）渲染引擎和非常先進的Chromium瀏覽器，透過解釋其內部的工作機制和原理，讓開發者可以很快理解這一切的前因後果。對於其他的廣大愛好者來說，HTML5技術才剛剛開始，未來的發展還將繼續，瞭解這一技術有助於擴充套件視野，而且理解瀏覽器對各種技術的應用和設計，對於大家理解很多其他領域的技術也有很強的啟發作用。

因為本書的介紹主要是基於對WebKit和Chromium內部原理的解釋來進行，而這些專案也都是基於C/C++程式碼來編寫，所以讀者最好對該語言有一些瞭解。不過，如果不瞭解它也沒有太大的關係，只要對物件導向程式設計的思想有所瞭解，閱讀本書也沒有太大的障礙。同時，本書不是一本介紹編寫HTML/JavaScript程式碼的書，所以，不會對HTML的程式設計做過多詳細的解釋，而是以一種簡單的方式描述一些基礎性常識。

本書的組織

本書基本的寫作方式是力求在介紹HTML5技術的基礎上，透過對W3C組織制定的規範的解釋，進一步解讀WebKit渲染引擎和Chromium瀏覽器是如何設計出高效的架構來支援這些HTML5技術規範的，其中著重剖析內部的框架和工作原理。在很多情況下，筆者也試圖透過一些開發和工作實踐來幫助理解這些框架和實現背後的機制和原理。

如果想了解整個渲染引擎的原理，光靠渲染引擎本身不足以說明所有機制，所以本書自始至終都是結合WebKit專案和基於WebKit的Chromium瀏覽器專案來描述其工作原理的，因為WebKit專案本身不是一個瀏覽器，而Chromium瀏覽器的設計和架構可以幫助讀者完整理解網頁的渲染過程和現代HTML5新技術是如何獲得支援的，這一過程的確非常精彩。

為了理解HTML5新技術和瀏覽器的工作原理，本書著重帶來以下方面的詳細分析，包括HTML5技術分析、渲染引擎和瀏覽器介紹、WebKit渲染引擎框架、Chromium框架和程式架構、網頁和網頁結構、渲染過程、網路棧、HTML語言、DOM、CSS樣式、佈局計算、渲染基礎、高階硬體加速機制、JavaScript引擎、外掛和擴充套件、多媒體、移動領域、安全機制、除錯機制、發展趨勢和Web平臺等眾多熱門技術和前沿性話題。筆者希望將HTML5中絕大多數的重要技術都展現出來，讓讀者可以對這個領域的眾多技術有個總體把握並對主要技術的前因後果有較為深入的理解。

本書引用的參考資料都是筆者多年來研究的物件，對於筆者理解HTML5技術、前端開發技術、渲染引擎和瀏覽器技術起了非常重要的作用，一些論題可能在本書中介紹得不夠完善，讀者可以參考這些資料，做進一步的學習和研究。

本書是一個講解內部原理的書，涉及眾多的技術，特別是深入技術內部工作機制的地方，由於這些內容非常複雜，而且是根據筆者個人的理解加以分析，所以很多時候可能存在理解上的偏差或者錯誤。如果有什麼不妥之處，還望廣大讀者諒解並給予指導，或者將意見傳送到我的郵箱：yongsheng@chromium.org。

致謝

感謝電子工業出版社的張春雨、王新宇、尚冰雪等編輯，自始至終給予筆者的強有力的幫助和支援。特別感謝我在英特爾亞太研發有限公司的同事，包括但是不限於閔洪波、王興楠、餘枝強、劉守群、朱儁敏、王視鎏、胡寧馨、高純、尹立、顧揚、馮海濤、霍海濤等，他們同我一起探討了很多關於HTML5、WebKit和Chromium方面的話題，讓我受益匪淺。

最後要感謝我的太太、女兒和父母，在寫作的大半年時間裡給予了筆者很多支援。因為本書是在繁忙的工作之餘利用瑣碎的業餘時間來完成的，所以，如果沒有家人提供的良好環境，我是沒有辦法完成這本書的。特別是我的小女兒經常過來“光顧”和“巡視”我的寫作，並給予一些特別的“驚喜”和“禮物”，讓我在寫作之餘多了一份樂趣。

朱永盛

2014年2月1日