WebKit技术内幕《一》浏览器内核

[Hjw52]

WebKit技术内幕《一》浏览器内核

• 浏览器特性

随着B/S架构的流行，浏览器变得越来越重要。而一个浏览器往往需要以下这些功能：

1. 网络：浏览器通过网络模块下载资源
2. 资源管理：管理下载后的资源，缓存资源
3. 网页浏览：将网络资源转变为可视化结果
4. 多页面管理：如何解决多页面同时加载的影响，多线程或多进程？
5. 插件与拓展：网页功能的拓展
6. 安全机制：提供安全的浏览环境
7. 开发者工具：对开发者更好地调试网页

• 用户代理（User Agent）

User Agent用于表明浏览器身份，因为一个网页在不同的浏览器往往有不同的展示，所以需要根据浏览器身份发送不同的网页内容。浏览器控制台输入 navigator.userAgent 就会得到以下字符串

"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36"

此次测试（使用Chrome）浏览器不仅包含Chrome 还加入了Mozilla ，AppleWebKit ， Safari的额外代理，表示浏览器也能兼容其定制内容的页面，这样就能拿到最新功能的页面了。

• 浏览器内核

在浏览器，将网络资源转换为可视化界面的模块就称为浏览器内核（也叫渲染引擎）。

目前主流内核：

浏览器	Chrome	IE	火狐	Safari
内核	Blink（基于WebKit）	Trident	Gecko	WebKit

渲染引擎主要由以下组成：

渲染引擎在基础模块的基础上主要包含：

1. HTML解释器：构建DOM树
2. CSS解释器：构建CSSDOM树
3. 布局：DOM树加CSS树，结合布局构建内部模型
4. JavaScript引擎：执行JavaScript代码
5. 绘图：使用图像库将布局后计算后的节点绘制图像

渲染过程：

上图大体概括了浏览器渲染的大体过程，这也很好解释了为什么不在DOM里面夹杂JavaScript代码，容易造成线程切换。

webKit的渲染过程大致可分成三大阶段（三阶段后面又细分具体过程）：

1. 从URL到构建完DOM树

   • 用户输入网页URL时，webKit调用资源加载器加载对应资源
   • 加载器依赖网络模块建立连接，发送请求
   • 收到的网页被HTML解释器转变成DOM树
   • 如果遇到JavaScript代码，调用js引擎解释执行
   • DOM树构建完触发DOMContent事件，DOM树构建完成及网页依赖资源都加载完成后触发onload事件。

2. 从DOM树构建完webKit的绘图上下文

   

   • css文件被解释成内部结构，附加在DOM树形成renderObject渲染树。
   • 渲染树创建，webKit同时会构建renderLayer层次树和一个虚拟的绘图上下文。

3. 从绘图上下文到生成图像

   

   • 绘图实现类结合图像库将绘制的结果返回给浏览器

• webKit

webKit是苹果公司开源的一个项目，被很多浏览器采用为内核，Chrome的Blink就是后面从webKit分支出去发展的。其整体架构如下图：

而webKit2则是在webKit基础上一组支持新架构的接口层。该接口与网页渲染工作代码不在同一个进程，实现了chromium多进程的优点。webKit2接口使用不需要接触背后的多进程机制。

如上图，网页渲染在web进程与webKit2所在的UI进程不是同一进程。

• chromium

chromium浏览器使用的也是基于webKit的Blink引擎，它相当于chrome的创新版，一些新技术都会先在chromium上实验。在chromium，webKit只是它的一部分。其中content模块和接口是对chromium渲染网页功能的抽象，它在webKit的上层渲染网页，以便可以使用沙箱模型和跨进程GPU等机制。相当于封装内层，提供content接口层让人调用。

• 多进程模型

多进程模型的优势：

1. 避免单个页面的崩溃而影响浏览器的稳定性。
2. 避免第三方插件崩溃影响浏览器的稳定性。
3. 方便安全模型的实施。

上图是chromium的多进程模型，其中连线代表IPC进程间通信，chromium浏览器主要进程类型有：

1. Browser进程
   • 浏览器的主进程，负责页面的显示和各页面的管理，是所有其他类型线程的祖先，负责它们的创建与销毁，有且仅有一个。
2. Renderer进程
   • 网页的渲染线程，可能有多个，不一定和网页数量相同
3. NPAPI插件进程
   • 进程为创建NPAPI类型的插件创建，每种类型插件只会创建一次，插件进程共享
4. GPU进程
   • 最多只有一个，GPU硬件加速时才创建
5. Pepper插件进程
   • 同NPAPI插件进程 ，为创建Pepper类型的插件创建。
6. 其他类型进程
   • 分场景使用，例如Linux的”Zygote“进程，”Sandbox“准备进程。

多进程模型下网页的渲染：

1. Browser进程收到请求，由UI线程处理，将对应任务转给I/O线程，再传递给Render进程
2. Render进程的IO线程处理后交给渲染线程渲染，最后render进程将结果由IO线程传递给Browser进程
3. Browser进程收到结果并绘制出来。

Renderer创建方式

Chromium允许用户配置 Renderer 进程的创建方式，有以下四种方式：

• Process-per-site-instance：每个页面都创建一个独立的渲染线程
• Process-per-site：同一个域的页面共享同一线程
• Process-per-tab（Chromium默认）：每个标签页都创建一个独立的渲染线程
• Single process：不为页面创建任何独立线程，渲染在Browser进程进行。主要在Android WebView使用。

下图为WebKit由内到外的交互：

• webKit2与chromium的区别

  首先，两者都是多进程架构的模型，两者的根本目的都要实现UI和渲染的分离，区别在于设计理念：

1. Chromium 从浏览器角度出发，使用的仍是webKit接口，在webKit上构建多进程架构实现，成本低，对移动资源消耗大。
2. webKit2 定位为渲染引擎，尽量将多进程架构隐藏，只暴露相应接口，但实现代价高。