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年從南京大學畢業後就任於英特爾亞太研發有限公司，專一於HTML五、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。

致謝

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

最後要感謝個人太太、女兒和父母，在寫做的大半年時間裏給予了筆者不少支持。由於本書是在繁忙的工做之餘利用瑣碎的業餘時間來完成的，因此，若是沒有家人提供的良好環境，我是沒有辦法完成這本書的。特別是個人小女兒常常過來「光顧」和「巡視」個人寫做，並給予一些特別的「驚喜」和「禮物」，讓我在寫做之餘多了一份樂趣。

朱永盛

2014年2月1日