本文以朱永生先生所著的《WebKit技术内幕》一书为参考，结合网络共享资源，记录Webkit的历史和技术要点，或略过一些不好的地方明白了。一、浏览器简史1993年，网景浏览器（netscape）诞生，宣告了第一代浏览器的诞生。1995年，MicrosoftIE（InternetExplorer）受益于window系统的捆绑安装，拉下老大哥Netscape，独占鳌头。1998年倒下的Netscape的工程师们联合成立了Mozilla基金会，主导开发了著名的开源项目火狐（Firefox）浏览器，并于2004年发布了1.0版本。至此，根深蒂固、高门槛的Firefox用户体验，逐渐蚕食着强大的IE浏览器的市场份额。就在此时，苹果发布了Safari浏览器，并开源了大名鼎鼎的Webkit渲染引擎的项目代码。2008年，谷歌创建了以Webkit为核心的Chromium。在Chromium技术进步（实验领域）的基础上，谷歌发布了更加稳定的Chrome浏览器版本。Chrome在各方面都做得很好，并迅速加入了IE、Firefox的行列，瓜分浏览器市场份额的战斗是一场三足鼎立的战斗。2、HTML5下的浏览器浏览器的基本功能：网络（网络是Web应用的瓶颈）、资源管理、网页浏览、多页面管理、插件与扩展、账号与同步、安全机制、开发者工具。IE浏览器目前只支持Window系统，Firefox暂不支持IOS系统。作为新一代的网页标准，HTML5是新技术的集合：离线、存储、连接、文件访问、语义、音频和视频、3D和图形、显示、性能等。随着HTML5标准的出现，各大浏览器厂商都在朝着实现这些相关功能迈进。就连高傲的微软也因势所趋，不得不放下一贯的狂妄作风。用户代理（UserAgent）是一个很有趣的现象。本来是浏览器提供给服务商的类似于身份证明的头文件信息。为了享受同一服务提供的定制化内容，后来的其他浏览器不得不对这个头信息进行伪装。（这些伪装者不仅包括臭名昭著的IE，还包括Safari、Chrome等现代浏览器）3.浏览器内核浏览器内核通常也是一个渲染引擎，根据描述建立数学模型，通过模型生成图像。主流的浏览器内核有Trident、Gecko、WebKit，分别是IE、Firefox、Chrome的内核。（谷歌2013年的Blink内核的根源其实是WebKit，而Blink是WebKit的一个分支，因为谷歌和苹果对WebKit的进化理念不同）。渲染引擎主要包括HTML解释器、CSS解释器、布局、JavaScript引擎、绘图。4、WebKit的渲染过程根据数据的流向将渲染过程分为三个阶段。第一阶段是从网页的RUL构建DOM树。当用户输入一个URL时，WebKit调用它的资源加载器来加载该URL对应的网页。加载器依赖网络模块建立连接、发送请求和接收回复。WebKit接收各种资源或数据，可以同步或异步获取。网页交给HTML解释器，将其转换成一系列的单词（Token）。解释器根据单词构建节点（Node），形成DOM树。如果节点是JavaScript，调用JavaScript引擎解释执行。JavaScript代码可能会修改DOM树的结构。如果节点需要依赖其他资源，如图片、CSS、视频等，调用资源加载器加载，但它们是异步的，不会阻碍当前DOM树的继续构建；如果是JavaScript资源URL（没有标注异步方式async），则需要停止当前DOM树的创建，继续创建DOM树，直到JavaScript资源被JavaScript引擎加载并执行。第二阶段是CSS文件被CSS解析器解析成内部表示结构后，从DOM树到WebKit的绘图上下文。CSS解释器完成工作后，将解释后的样式信息附加到DOM树上，也就是RenderObject树。当RenderObject节点被创建时，Webkit会根据网页的层级结构创建一个RenderLayer树，同时构建一个虚拟的绘图上下文。第三阶段是从绘图上下文生成最终图像。绘图上下文是一个与平台无关的抽象类。它将每个绘图操作桥接到不同的具体实现类，即绘图具体实现类。绘图实现类也可能有简单的实现，也可能有复杂的实现。在Chromium中，它的实现相当复杂，需要Chromium的compositor完成复杂的多进程和GPU加速机制，后面会讲到。绘图实现类保存2D图形库或3D图形库绘制的结果，交给浏览器与浏览器界面一起显示。5、WebKit架构WebKit之所以支持众多浏览器和操作系统，其秘诀在于保持核心和充分解耦。底层是“操作系统”，浏览器属于应用层，需要调用操作系统和硬件的驱动处理。在操作系统之上是WebKit所依赖的各种第三方库。这些库是Webkit运行和处理的基础包。例如：图形库、网络库、视频库。加载和渲染网页自然需要应用到它们。如何更高效的连接这些底层库，并设计出健壮的架构来支持未来越来越复杂的基础库，是我们浏览器开发者需要考虑的重要问题。在这两个之上，我们终于回到了正确的WebKit项目部分。这包括大多数浏览器共享的WebCore部分和非共享的WebKitPorts部分。WebCore具体包括浏览器加载和渲染网页的基础部分，如HTML解释器、CSS解释器、SVG、DOM、渲染树等。JavaScriptCore引擎是WebKit默认的JavaScript引擎。事实上，WebKit与JS引擎的集成度并不高。在Google的Chromium中，它被V8引擎取代。WebkitPorts是不同操作系统和浏览器产生的可自行设计的部分，包括硬件加速架构、网络栈、视频解码、图片解码等。在WebCore和WebKitPorts之上暴露了嵌入式编程接口。这些接口是为浏览器调用提供的（绝对不仅仅是浏览器）。
