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技术、前端开发技术、渲染引擎和浏览器技术起了非常重要的作用,一些论题可能在本书中介绍得不够完善,读者可以参考这些资料,做进一步的学习和研究。
本书是一个讲解内部原理的书,涉及众多的技术,特别是深入技术内部工作机制的地方,由于这些内容非常复杂,而且是根据笔者个人的理解加以分析,所以很多时候可能存在理解上的偏差或者错误。如果有什么不妥之处,还望广大读者谅解并给予指导,或者将意见发送到我的邮箱:[email protected]。
致谢
感谢电子工业出版社的张春雨、王新宇、尚冰雪等编辑,自始至终给予笔者的强有力的帮助和支持。特别感谢我在英特尔亚太研发有限公司的同事,包括但是不限于闵洪波、王兴楠、余枝强、刘守群、朱俊敏、王视鎏、胡宁馨、高纯、尹立、顾扬、冯海涛、霍海涛等,他们同我一起探讨了很多关于HTML5、WebKit和Chromium方面的话题,让我受益匪浅。
最后要感谢我的太太、女儿和父母,在写作的大半年时间里给予了笔者很多支持。因为本书是在繁忙的工作之余利用琐碎的业余时间来完成的,所以,如果没有家人提供的良好环境,我是没有办法完成这本书的。特别是我的小女儿经常过来“光顾”和“巡视”我的写作,并给予一些特别的“惊喜”和“礼物”,让我在写作之余多了一份乐趣。
朱永盛
2014年2月1日
WebKit技术内幕