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日