浏览器内核分析2 -- Webkit和Chromium源码结构

1 Webkit架构

Webkit和Blink代码量都是几百万行级别，阅读难度很大，故先了解下它的大体架构是十分有意义的。下面是《Webkit技术内幕》一书中给出的架构图

由图中可见，大体分为以下几个层次
1. 操作系统：WebKit可以在不同OS上运行，如mac OS，Windows，Linux等。
2. 三方库：WebKit依赖了很多三方库，如音频，视频等
3. WebKit：大概分为两个部分

1）WebCore：与平台无关，各个浏览器移植所共享。包含HTML解析，CSS解析，渲染，调试等部分
2）JavaScript引擎：WebKit中默认使用JavaScriptCore引擎，Blink中使用V8引擎，二者的区别后面文章会详细介绍
2）WebKit ports：平台相关，需要浏览器根据硬件平台做更改。包含网络栈，音视频，GPU等部分

4. WebKit接口层：提供接口给浏览器应用调用

2 Webkit源码结构

Webkit源码结构还是十分清晰的，基本上每个模块对应一个子目录。主要代码在Source/目录下，如下

• WebCore/: 平台无关，各个不同移植所共享
  
  • css/: CSS解析器
  • dom/: DOM解析器
  • html/: HTML解析器
  • inspector/: 调试相关
  • loader/: 资源加载模块
  • page/: 与页面相关的全局对象，如window，navigator，DOM事件，动画等
  • storage/: cookie处理和HTML5中的LocalStorage处理
• JavaScriptCore/：Webkit中默认的JS引擎，Blink中改为V8
• WebKit/ WebKit2/：嵌入式接口层
• WTF/：基础类库，如字符串操作，线程，算法等

3 Chromium浏览器架构

首先明确一个概念，Chromium和Chrome一样，是一个浏览器，他们都是基于Blink内核的。二者区别如下

• Chromium可以看做是Chrome的试验版本，加入了很多比较激进的特性。Chrome是发行版本，待Chromium稳定后再发布
• Chromium发版周期很快，而Chrome比较稳定
• Chrome中多了Google的一些服务，并有自动更新功能

Blink中采用了多进程架构，它的优点如下

• 避免单个page crash影响整个浏览器
• 避免第三方插件crash影响整个浏览器
• 多进程充分利用多核优势
• 方便使用沙盒模型隔离插件等进程，提高浏览器稳定性

Blink中包含的主要进程如下

1. Browser进程：主进程，只有一个。它的作用有
   
   • 负责浏览器界面显示，与用户交互。如前进，后退等
   • 负责各个页面的管理，创建和销毁其他进程
   • 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
   • 网络资源的管理，下载等
2. Renderer进程：默认每个页面一个，互不影响。主要作用为解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
3. 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
4. GPU进程：最多一个，用于3D绘制等

Browser和Renderer通信过程

1. Browser进程收到用户请求，首先UI线程处理，转交给IO线程，随后通过RendererHost接口转交给Renderer进程
2. Renderer进程的Renderer接口收到消息，IO线程简单处理后，交给渲染线程，进行HTML解析和DOM树构建，CSS解析，JS执行，RenderObject树构建，布局和绘制等过程，生成用户可见区域（ViewPort）的Bitmap。最后通过共享内存方式IPC给Browser进程
3. Browser进程使用Bitmap内存在界面上绘制出图像。