浏览器工作原理与实践01——宏观视角下的浏览器
极客时间浏览器工作原理与实践01——宏观视角下的浏览器
1. Chrome架构
使用Chrome作为分析的例子。原因如下：Chrome、微软的 Edge 以及国内的大部分主流浏览器，都是基于 Chromium 二次开发而来；而 Chrome 是 Google 的官方发行版，特性和 Chromium 基本一样，只存在一些产品层面差异；再加上 Chrome 是目前世界上使用率最高的浏览器，所以 Chrome 最具代表性。
1.1 单进程浏览器时代
单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里，这些模块包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。其实早在 2007 年之前，市面上浏览器都是单进程的。单进程浏览器的架构如下图所示：
如此多的功能模块运行在一个进程里，是导致单进程浏览器不稳定、不流畅和不安全的一个主要因素。
1.2 多进程浏览器时代
早期多进程架构
从图中可以看出，Chrome 的页面是运行在单独的渲染进程中的，同时页面里的插件也是运行在单独的插件进程之中，而进程之间是通过 IPC 机制进行通信（如图中虚线部分）。
目前多进程架构
最新的 Chrome 进程架构，如下图：
从图中可以看出，最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。
虽然多进程模型提升了浏览器的稳定性、流畅性和安全性，但同样不可避免地带来了更高的资源占用和更复杂的体系架构的问题。
浏览器的工作流程如下：首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。然后，在网络进程中发起真正的 URL 请求。接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。浏览器进程接收到网络进程的响应头数据之后，发送“提交导航 (Commit Navigation)”消息到渲染进程；渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道；最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。
2. 资源请求
衡量 Web 页面性能的一个重要的指标叫“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率，更快的页面响应意味着更多的 PV、更高的参与度，以及更高的转化率。影响 FP 指标一个重要的因素是网络加载速度。浏览器端发起 HTTP 请求流程如下：
1. 构建请求
首先，浏览器构建请求行信息，构建好后，浏览器准备发起网络请求。
2. 查找缓存
真正发起网络请求之前，浏览器会先在浏览器缓存中查询是否有要请求的文件。当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求，而不会再去源服务器重新下载。这样做的好处有：缓解服务器端压力，提升性能（获取资源的耗时更短了）；对于网站来说，缓存是实现快速资源加载的重要组成部分。如果缓存查找失败，就会进入网络请求过程了。
3. 准备 IP 地址和端口
HTTP 工作开始之前，浏览器需要通过 TCP 与服务器建立连接，建立 TCP 连接的第一步就是需要准备 IP 地址和端口号。
4. 等待 TCP 队列
Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。当然，如果当前请求数量少于 6，会直接进入下一步，建立 TCP 连接。
5. 建立 TCP 连接
在 HTTP 工作开始之前，浏览器通过 TCP 与服务器建立连接。
6. 发送 HTTP 请求
一旦建立了 TCP 连接，浏览器就可以和服务器进行通信了。而 HTTP 中的数据正是在这个通信过程中传输的。
3. 导航流程
用户发出 URL 请求到页面开始解析的这个过程，就叫做导航。这个过程主要有4个步骤：用户请求网址，URL请求响应，浏览器准备渲染页面和提交文档。
用户请求网址和URL请求响应比较熟悉了，暂且略过。
浏览器准备渲染：确定该页面的渲染进程的策略——通常情况下，打开新的页面都会使用单独的渲染进程；如果从 A 页面打开 B 页面，且 A 和 B 都属于同一站点的话，那么 B 页面复用 A 页面的渲染进程；如果是其他情况，浏览器进程则会为 B 创建一个新的渲染进程（process-per-site-instance）。
提交文档：指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程。具体操作有：（1）当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息；（2）渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”；（3）等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；（4）浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。
导航结束后，页面显示如下：
4. 渲染流程
渲染流程主要作用是将传输的HTML、CSS、JavaScript 等文件，经过浏览器就会显示出漂亮的页面，如下图：
按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段（分层、绘制、分块、栅格化和合成）。流程主要如下：
（1）渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构；
（2）渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式；
（3）创建布局树，并计算元素的布局信息；
（4）对布局树进行分层，并生成分层树；
（5）为每个图层生成绘制列表，并将其提交到合成线程；
（6）合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图；
（7）合成线程发送绘制图块命令 DrawQuad 给浏览器进程；
（8）浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。
4.1 构建 DOM 树
DOM 树的构建过程，如下图：
4.2 样式计算
样式计算的目的是为了计算出 DOM 节点中每个元素的具体样式，这个阶段大体可分为三步来完成。
（1） 将 CSS 转换为浏览器能够理解的结构：当渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构——styleSheets；
（2） 将上步骤中的所有值转换为渲染引擎容易理解的、标准化的计算值；
（3） 计算出 DOM 树中每个节点的具体样式：CSS 继承和CCS 层叠。
4.3 布局阶段
Chrome 在布局阶段需要完成两个任务：创建布局树和布局计算。
（1） 创建布局树：
（2） 布局计算：由分层、绘制、分块、栅格化和合成几个部分组成。
a. 分层
通常情况下，并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。通常在下面两种情况下，会被提升为单独的一层：
第一点， 拥有层叠上下文属性的元素;
第二点， 需要剪裁的地方。
b. 绘制
绘制会把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表。如下图所示：
c. 分块
d. 栅格化
绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。渲染主线程和合成线程之间的关系如下图：
e. 合成
一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。浏览器进程里面有一个叫 viz 的组件，用来接收合成线程发过来的 DrawQuad 命令，然后根据 DrawQuad 命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。
