常见js宿主环境（一）：web browser

正如另一篇文章所言，ecma262只定义了语言层面的一些规范，js实际运行过程中还需要特定的宿主环境（host environment）提供输入输出等功能。

本系列介绍三种常见的js宿主环境

• web browser（本文）
• node.js
• electron

本文以chrome为例，会对浏览器的架构以及相关运行过程做简要介绍，更多细节参考文中出现的链接和这篇web性能相关的文章（还没发布）。

全文参考inside look at modern web browser。

1 chrome浏览器架构

1.1 相关概念

在认识chrome具体架构之前我们先回顾几个概念

首先是两个比较重要的硬件

• cpu 中央处理单元，是计算机的运算核控制中心，参考这里
• gpu 即Graphics Processing Unit，可以理解为有很多核用于处理简单计算的cpu，一开始涉及为了处理图像，后来可以用来独立处理计算任务。

程序实际运行还涉及另外两个重要概念

• 进程 为操作系统并发引入的概念，可以理解为应用中一个运行着的程序，参考这里
• 线程 可以理解为轻量的线程，参考这里

多进程架构

一个浏览器包括很多种任务，可以只使用一个进程包含多个线程，也可以多个进程，不同的浏览器会有不同的实现，总体来说还是多进程会更有优势一些，包括

• 每个tab分别处于不同进程，避免了一个tab无响应等对其他tab的影响
• 增强安全性

本文介绍的架构（是参考文章发布时，即2018年9月，的设计）包括

1. browser进程，浏览器的主进程，负责导航栏、书签、前进后退按钮，并且控制可见性以及特权功能，比如网络请求和文件访问。
   • ui线程 页面的展示和交互
   • network线程 网络请求
   • storage线程 存储
2. renderer进程 控制一个tab内展示的部分，js engine和browser engine工作在这个进程。其中js engine，是es262的实现，用来运行js；browser engine，又叫做 layout engine or rendering engine，负责js引擎外其他工作，比如解析html和css，以及布局
   • worker线程
   • main线程 处理worker以外的代码
   • compositor线程
   • raster线程 后面两个线程参与渲染
3. plugin进程
4. gpu进程 负责其他进程中gpu相关工作

2 导航过程

这部分主要发生在browser进程，并涉及部分和renderer进程的交互。

1. 当用户在地址栏输入一个地址时，ui首先判断是一次搜索还是一个url。
2. 当用户点击回车，ui线程就会发起一个请求，此时tab上的loading图标显示加载中，network线程按照计算机网络介绍的过程建立连接并获取响应。请求一开始发起时，ui线程就知道了要加载一个页面因此会提前找一个renderer进程。如果收到的是重定向,network线程就会告诉ui线程，后者启动另一个请求。
3. 当收到响应体时，network线程对其MIME Type sniffing,检查content-type和实际类型，如果收到的是html文件，则会交给renderer进程渲染，否则就会交给下载器下载。这时候也会进行安全检查，对于已知的恶意地址给予提示，阻止非法的跨域请求。
4. 此时renderer进程和数据已经准备好了，browser进程发送一个ipc到renderer进程提交导航，并发送数据流。当browswe进程收到referer进程的确认，导航结束，进入文档加载和渲染阶段。此时地址栏更新，会话历史更新。
5. 当renderer进程完成渲染（此时本页面和包含的所有iframes都完成onload），会回复一个ipc到browser进程，ui线程停止tab上的loading图标。
6. 当在一个本来就渲染好的页面跳转为另一个地址，browser进程会先检查当前网站的beforeunload事件，如果能继续跳转则在后续渲染中使用另一个renderer进程。

3 文档加载和渲染过程