webkit功能（webkit功能选项详解）

导语：本文从市面主流的浏览器及相应的内核引擎开始，介绍了Chromium为代表的浏览器架构及Blink内核的功能架构。Chromium为多进程架构，用户从启动运行浏览器后，先后经过页面导航、渲染、资源加载、样式计算、布局、绘制、合成到栅格化，最后完成GPU展示。而页面渲染完成后，浏览器如何响应页面操作事件也进行了深入的介绍。良心推荐！
本文第二至五部分内容根据 Mariko Kosaka 的英文原版《Inside look at modern web browser》(见参考文献)，进行翻译、理解、总结提炼、条理化、加入应用示例、进行相关知识补充扩展而来。

webkit功能,webkit功能选项详解(1)

一、浏览器概论

浏览器经历了很多年的发展，浏览器引擎也在不停地迭代和演进。从PC时代到移动端，以独立浏览器的形态还是以系统WebView组件内嵌的形态存在，在互联网的生态系统中一直扮演着重要的角色。了解浏览器及其原理可以让我们打开另一个世界。

1. 浏览器引擎

以下是市面留存的主流浏览器的引擎介绍。

1.1 浏览器引擎

Trident：IE浏览器引擎
Gecko：Firefox浏览器引擎
Presto：Opera浏览器引擎
WebKit：Safari，Google Chrome浏览器引擎。

1) Chromium：基于webkit，08年开始作为Chrome的引擎，Chromium浏览器是Chrome的实验版，实验新特性。

2) Webkit2：2010年随OS X Lion一起面世。WebCore层面实现进程隔离与Google的沙箱设计存在冲突。

3) Blink：基于Webkit2分支，13年谷歌开始作为Chrome 28的引擎集成在Chromium浏览器里。Android的WebView同样基于Webkit2。

1.2 微软浏览器

目前PC场景操作系统仍是windows一统天下，对桌面用户来说，虽然IE的市场份额在下降，但是IE曾经也风光过。IE内核以Trident为主，最新的Edge也兼容了Chromium内核。

Microsoft Edge：内核为：EDGE，Windows 10默认浏览器，不能单独下载安装。兼容Chromium内核，同时保留EDGE内核来兼容企业网站

Internet Explorer 11：Windows 8.1，引擎Trident 7.0
Internet Explorer 10：Windows 8默认浏览器，引擎Trident
Internet Explorer 9
Internet Explorer 8：Windows 7集成
Internet Explorer 7：Windows Vista集成，2016年停止支持
Internet Explorer 6：2014年停止支持

2. 浏览器架构

目前chromium浏览器的架构主要由下以几个部分构成。

webkit功能,webkit功能选项详解(2)

以下为架构的介绍：

操作系统：WebKit可以运行在不同的操作系统上，如Chromium浏览器支持Windows、Linux、Android等系统；
第三方库：这些库是WebKit运行的基础，包括2D图形库、3D图形库、网络库、存储库、音视频库等；
WebCore：WebKit加载和渲染网页的基础，是不同浏览器所使用的WebKit中共享的部分，包括HTML解析器、CSS解析器、SVG、布局、渲染树等等；
JavaScript引擎：JavaScript解析器，WebKit默认的引擎是JavaScriptCore，Google的Blink为V8引擎；
WebKit Ports：WebKit中的移植部分，包括网络栈、音视频解码、硬件加速等模块，这部分对WebKit的功能和性能影响比较大。
WebKit嵌入式接口：WebKit对外暴露的接口层，这个接口是提供给浏览器调用的，如给chromium调用，因为接口与具体的移植也有关系，所以中间会有一个WebKit绑定层

JavaScriptCore（用于Safari）

JavaSript Parser，JSON Parser
字节编译器：使用内部字节码格式
汇编程序：在运行时使用代码修补 - >它需要可写代码内存
数据流图：基于编译时推测优化生成代码的新举措
解释器：运行生成的字节码
Regexp引擎：支持JIT
垃圾收集器：标记和扫描
运行时：所有JS全局对象（日期，字符串，数字等）
调试器，Profiler

WebCore

资源加载器：HTML和XML解析器，DOM
SVG和SMIL
CSS：分析器，选择器，动画
渲染和布局
绑定生成器：IDL文件：JSC，V8，ObjC
HTML5：音频，视频，画布，WebGL，通知功能
WebInspector
平台集成：图形，字体，声音，视频

相关资料

Blink内核：https://src.chromium.org/viewvc

2.1 多进程架构

webkit功能,webkit功能选项详解(3)

图片引自chromium-design-doc

https://www.chromium.org/developers/design-documents/multi-process-architecture

2.1.1 Chromium多进程架构

早期的web浏览器页面行为不当、浏览器错误、浏览器插件错误都会引起整个浏览器或当前运行的选项卡关闭。因此将chromium应用程序放在相互隔离的独立的进程中：

单个程序崩溃不会损害其他应用程序
不影响操作系统完整性
每个用户不能访问其他用户数据(内存保护、访问控制)

2.1.2 架构组成

UI主进程：页面选项卡、插件进程作为浏览器进程。
渲染进程：特定选项卡作为渲染进程(渲染器)，使用Blink(Webkit)开源布局引擎解释和布局HTML。

2.1.3 渲染过程管理

RenderProcess：每个渲染进程都有一个全局对象，管理与父浏览器的通信并维护全局状态
RenderProcessHost：浏览器为每个渲染进程维护相应的渲染进程宿主，为每个渲染器管理浏览器状态和IPC(IPC已弃用，最新用Mojo)通信
RenderView：每个渲染进程有一或多个RenderView对象，对应内容选项卡。RenderProcessHost为渲染器的每个视图(RenderView)维护一个RenderViewHost。每个视图用一个ID区分。

2.1.4 运行流程

渲染进程共享：开启浏览器新窗口或新选项卡时，创建新的浏览器进程，并创建RenderView。不同页面/iframe可共享同个渲染进程。
崩溃监视：浏览器的IPC连接会监视进程句柄，如句柄对应的渲染进程已崩溃，会向标签发送通知，浏览器会显示“悲伤标签”
沙箱运行：渲染器在单独的进程中运行，通过沙箱限制其对系统资源(文件、网络、显示、击键)的访问，而须通过父浏览器进程访问
内存交回：进程最小化、隐藏的选项卡将其内存自动放入“可用内存”，内存不足时，windows会将该可用内存数据写磁盘，内存被用于更高优先级任务，以提高可见程序的响应速度。

2.1.5 插件扩展

第三方编写的NPAPI插件因存在不稳定，同时需控制对系统资源的访问，在各自独立的进程中运行，与渲染器分开。

插件设计文档：https://www.chromium.org/developers/design-documents/plugin-architecture

2.2 Webkit(Blink)架构

Blink是Web平台的渲染引擎，实现了浏览器选项卡中呈现的内容：