简析浏览器工作流程

浏览器内核

主流内核：Trident(IE)、Gecko(FireFox)、Webkit(Safari)、blink(Chrome)、Presto(opera前内核、已废弃)

浏览器内核分为两部分：渲染引擎、js引擎，随着js引擎越来越独立，内核就倾向于只指渲染引擎

• 渲染引擎：负责对网页语法的解释（HTML、javaScript、引入css等），并渲染（显示）网页

• js引擎：javaScript的解释、编译、执行（V8、SpiderMonkey、JavaScriptCore）

2008 年，谷歌公司发布了 chrome 浏览器，浏览器使用的内核被命名为 chromium，基于苹果开源的Webkit

2013 年 ，谷歌Webkit分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎，内置于 Chrome 浏览器之中

移动端webview内核

• Android

  在Android4.4以前，webview是Android webkit 浏览器内核，很多HTML5标准语法不支持，比如indexeddb、webgl等，canvas性能也非常差 Android4.4起，变成了chromium内核，内核版本是chrome30，性能和现代语法支持大幅提升 从Android5开始，webview脱离rom可单独更新，伴随着chrome的发版，google会在google play store上同步更新Android system webview（国内存在无法更新问题）

  个别厂商会定制webview；腾讯使用X5内核（APP也可以集成，支持webrtc网页浏览器进行实时语音对话或视频对话）

  不同于PC端chromium内核的浏览器，默认与APP在同一进程，可开启独立进程运行

• iOS

  从iOS8起，Apple推出了wkwebview，在app外的独立进程执行，使用更快的Nitro JavaScript引擎（2008 年苹果重写了JSCore，叫做 SquirrelFish，后来是 SquirrelFish Extreme，又叫 Nitro，但早期uiwebview被限制使用），由于iOS13将uiwebview列入非公开api，未来会禁止使用uiwebview的应用上架

进程架构（Chrome）

chrome提供了任务管理器，从中可以查看到正在运行的进程：

Chrome任务管理器

从上图可以看出浏览器只打开了一个标签页，但是却有十多个进程，抛开插件进程外还有5个进程

浏览器进程并不是一开始就是这样的结构，这里先不解释每一个进程的作用，而是回顾一下浏览器进程架构的演化历史

单进程浏览器时代

浏览器的所有功能模块都是运行在同一个进程里，包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。

单进程浏览器架构

优点：资源占用少，无需进程间通信

缺点：

• 不稳定：一个模块的意外崩溃会引起整个浏览器的崩溃，早期浏览器需要借助于插件来实现诸如 Web 视频、Web 游戏等各种强大的功能，但是插件是最容易出问题的模块

• 不流畅：所有页面的渲染模块、JavaScript 执行环境以及插件都是运行在同一个线程中的，这就意味着同一时刻只能有一个模块可以执行

• 不安全：插件可以使用 C/C++ 等代码编写，通过插件可以获取到操作系统的任意资源，当你在页面运行一个插件时也就意味着这个插件能完全操作你的电脑

多进程浏览器

多进程浏览器架构

Chromium官方架构图

Chrome的页面是运行在单独的渲染进程中的，同时页面里的插件也是运行在单独的插件进程之中，而进程之间是通过 IPC 机制进行通信

稳定性：进程是相互隔离的，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程

流畅度：JavaScript 也是运行在渲染进程中的，所以即使 JavaScript 阻塞了渲染进程，影响到的也只是当前的渲染页面，而并不会影响浏览器和其他页面

安全性：多进程架构的额外好处是可以使用安全沙箱进行进程隔离，Chrome 把插件进程和渲染进程锁在沙箱里面，这样即使在渲染进程或者插件进程里面执行了恶意程序，恶意程序也无法突破沙箱去获取系统权限

最新Chrome架构

最新Chrome架构图

最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。他们主要负责的任务如下：

• 浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。

• 渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。

• GPU 进程：其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。

• 网络进程：主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。

• 插件进程：主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

再来看看文章开头的截图，不难看出图中各个进程与架构设计中一一对应关系：

Chrome任务管理器

注：这里还多了一个V8代理解析工具，是因为我开启了代理，Chrome支持使用JavaScript来写连接代理服务器脚本，又称为在线pac代理脚本。刚开始的时候Chrome是在浏览器进程里面解析pac代理脚本的，由于是JavaScript脚本，所以需要在浏览器进程里面引入V8，不过把V8运行在浏览器进程似乎不太好，于是Chrome团队后来就把这个功能独立出来一个进程了，这个进程就叫着“Utility: V8 Proxy Resolver”

FireFox的多进程架构

FireFox通过Electrolysis（e10s）项目提供多进程支持

e10s 多进程功能的发展路线综述

火狐任务管理器

网络请求

通过一张示意图来分析浏览器进行网络请求的大致流程

浏览器请求流程

缓存流程

浏览器缓存示意图

浏览器缓存获取流程

详细的缓存策略可以参考运维知识体系笔记