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日