盒子
文章目录
  1. 一、前置知识
  2. 二、浏览器的多进程架构
  3. 三、多进程架构的好处
  4. 四、多进程架构的优化
    1. 4.1 浏览器的进程模式
    2. 4.2 使用 Process-per-site-instance的原因
  5. 五、导航过程
    1. 5.1 处理输入
    2. 5.2 开始导航
    3. 5.3 读取响应
    4. 5.4 网页加载过程
    5. 5.5 提交导航
    6. 5.6 初始化加载完成
  6. 六、网页渲染原理
    1. 6.1 构建DOM
    2. 6.2 子资源加载
    3. 6.3 JavaScript 的下载与执行
    4. 6.4 样式计算 - Style calculation
    5. 6.5 布局 - Layout
    6. 6.5 绘制 - Paint
    7. 6.5 合成 - Compositing
  7. 七、浏览器对事件的处理
    1. 渲染进程中合成器线程接收事件
    2. 查找事件的目标对象（event target）
    3. 浏览器对事件的优化
  8. 总结
  9. 相关参考链接

浏览器的原理

2022.09.14 Jojo 前端  热度 ℃

一、前置知识

在讲浏览器架构之前，需要理解进程和线程两个概念：

  1. 进程（process）是程序在执行过程中分配和管理资源的基本单位；
  2. 线程（thread）是 CPU 调度和分派的基本单位，它可与同属一个进程的其他的线程共享进程所拥有的全部资源。

浏览器属于一个应用程序，而应用程序的一次执行，可以理解为计算机启动了一个进程，进程启动后，CPU 会给该进程分配相应的内存空间，当我们的进程得到了内存之后，就可以使用线程进行资源调度，进而完成我们应用程序的功能。 而在应用程序中，为了满足功能的需要，启动的进程会创建另外的新的进程来处理其他任务，这些创建出来的新的进程拥有全新的独立的内存空间，不能与原来的进程争夺内存，如果这些进程之间需要通信，可以通过 IPC 机制（Inter Process Communication）来进行。

Untitled

很多应用程序都会采取这种多进程的方式来工作，因为进程和进程之间是互相独立的它们互不影响，也就是说，当其中一个进程挂掉了之后，不会影响到其他进程的执行，只需要重启挂掉的进程就可以恢复运行。

二、浏览器的多进程架构

不同的浏览器使用不同的架构，以 Chrome 为例，主要的进程有4个：

  1. 浏览器进程 (Browser Process)：负责浏览器的TAB的前进、后退、地址栏、书签栏的工作和处理浏览器的一些不可见的底层操作，比如网络请求和文件访问；
  2. 渲染进程 (Renderer Process)：负责一个 Tab 内的显示相关的工作，也称渲染引擎；
  3. 插件进程 (Plugin Process)：负责控制网页使用到的插件；
  4. GPU进程 (GPU Process)：负责处理整个应用程序的 GPU 任务。

Untitled

首先，当我们是要浏览一个网页，我们会在浏览器的地址栏里输入 URL：

  1. Browser Process 会向这个URL发送请求，获取这个 URL 的HTML内容，然后将 HTML 交给Renderer Process；
  2. Renderer Process 解析HTML内容，解析遇到需要请求网络的资源又返回来交给Browser Process进行加载，同时通知Browser Process需要Plugin Process加载插件资源，执行插件代码；
  3. 解析完成后，Renderer Process计算得到图像帧，并将这些图像帧交给GPU Process；
  4. GPU Process将其转化为图像显示屏幕。

三、多进程架构的好处

  1. 更高的容错性：当今 WEB 应用中，HTML/JavaScript/CSS 日益复杂，这些跑在渲染引擎的代码频繁的出现 BUG，而有些 BUG 会直接导致渲染引擎崩溃，多进程架构使得每一个渲染引擎运行在各自的进程中，相互之间不受影响，也就是说，当其中一个页面崩溃挂掉之后，其他页面还可以正常的运行不收影响；
  2. 更高的安全性和沙盒性（sanboxing）：渲染引擎会经常性的在网络上遇到不可信、甚至是恶意的代码，它们会利用这些漏洞在你的电脑上安装恶意的软件。针对这一问题，浏览器对不同进程限制了不同的权限，并为其提供沙盒运行环境，使其更安全更可靠；
  3. 更快的响应速度：在单进程的架构中，各个任务相互竞争抢夺 CPU 资源，使得浏览器响应速度变慢，而多进程架构正好规避了这一缺点。

四、多进程架构的优化

之前的我们说到，Renderer Process的作用是负责一个 Tab 内的显示相关的工作，这就意味着一个 Tab，就会有一个 Renderer Process，这些进程之间的内存无法进行共享，不同进程的内存常常需要包含相同的内容。

4.1 浏览器的进程模式

为了节省内存，Chrome 提供了四种进程模式（Process Models），不同的进程模式会对 tab 进程做不同的处理。

  1. Process-per-site-instance (default)：同一个 site-instance 使用一个进程；
  2. Process-per-site ：同一个 site 使用一个进程；
  3. Process-per-tab ：每个 tab 使用一个进程；
  4. Single process ： 所有 tab 共用一个进程。

这里需要给出 site 和 site-instance 的定义

  • site (同站点)： 相同的 registered domain name(如： google.com ，bbc.co.uk)和 scheme (如：https://)。比如 a.baidu.com 和 b.baidu.com 就可以理解为同一个 site（注意这里要和 Same-origin policy 区分开来，同源策略还涉及到子域名和端口）。
  • site-instance（同站点实例）：满足下面两中情况并且打开的新、旧页面属于上面定义的同一个 site，就属于同一个 site-instance
    1. 用户通过<a target="_blank">这种方式点击打开的新页面
    2. JS代码打开的新页面（比如 window.open)

理解了概念之后，下面解释四个进程模式

  1. Single process：顾名思义，单进程模式，所有 tab 都会使用同一个进程；
  2. Process-per-tab：每打开一个 tab，会新建一个进程；
  3. Process-per-site：当你打开 a.baidu.com 页面，在打开 b.baidu.com 的页面，这两个页面的 tab 使用的是共一个进程，因为这两个页面的 site 相同，而如此一来，如果其中一个tab崩溃了，而另一个tab也会崩溃；
  4. Process-per-site-instance： 是最重要的，因为这个是 Chrome 默认使用的模式，也就是几乎所有的用户都在用的模式：
  5. 当你打开一个 tab 访问 a.baidu.com ，然后再打开一个 tab 访问 b.baidu.com，这两个 tab 会使用两个进程；
  6. 而如果你在 a.baidu.com 中，通过 JS 代码打开了 b.baidu.com 页面，这两个 tab 会使用同一个进程。

4.2 使用 Process-per-site-instance的原因

Process-per-site-instance兼容了性能与易用性，是一个比较中庸通用的模式

  • 相较于 Process-per-tab，能够少开很多进程，就意味着更少的内存占用；
  • 相较于 Process-per-site，能够更好的隔离相同域名下毫无关联的 tab 更加安全。

五、导航过程

之前我们我们提到，tab 以外的大部分工作由浏览器进程Browser Process负责，针对工作的不同，Browser Process 划分出不同的工作线程：

  1. UI thread：控制浏览器上的按钮及输入框；
  2. Network thread：处理网络请求，从网上获取数据；
  3. Storage thread： 控制文件等的访问；

Untitled

5.1 处理输入

当我们在浏览器的地址栏输入内容按下回车时，UI thread会判断输入的内容是搜索关键词（search query）还是 URL，如果是搜索关键词，跳转至默认搜索引擎对应都搜索 URL，如果输入的内容是URL，则开始请求 URL。（这里有个小型的数据库用于记录历史记录）。

5.2 开始导航

回车按下后，UI thread将关键词搜索对应的URL或输入的URL交给网络线程Network thread，此时UI线程使 tab 前的图标展示为加载中状态，然后网络进程进行一系列诸如 DNS 寻址，建立 TLS 连接等操作进行资源请求，如果收到服务器的 301 重定向响应，它就会告知 UI 线程进行重定向然后它会再次发起一个新的网络请求。

5.3 读取响应

Network thread接收到服务器的响应后，开始解析HTTP响应报文，然后根据响应头中的Content-Type字段来确定响应主体的媒体类型（MIME Type）

  1. 如果媒体类型是一个 HTML 文件，则将响应数据交给渲染进程（Renderer process）来进行下一步的工作；
  2. 如果是 zip 文件或者其它文件，会把相关数据传输给下载管理器。

与此同时，浏览器会进行 Safe Browsing 安全检查，如果域名或者请求内容匹配到已知的恶意站点，Network thread 会展示一个警告页。除此之外，网络线程还会做 CORB（Cross Origin Read Blocking）检查来确定那些敏感的跨站数据不会被发送至渲染进程。

5.4 网页加载过程

各种检查完毕以后，Network thread 确信浏览器可以导航到请求网页，Network thread会通知UI thread数据已经准备好，UI thread 会查找到一个 Renderer process 进行网页的渲染。

浏览器为了对查找渲染进程这一步骤进行优化，考虑到网络请求获取响应需要时间，所以在第二步开始，浏览器已经预先查找和启动了一个渲染进程，如果中间步骤一切顺利，当 Network thread接收到数据时，渲染进程已经准备好了，但是如果遇到重定向，这个准备好的渲染进程也许就不可用了，这个时候会重新启动一个渲染进程。

5.5 提交导航

到了这一步，数据和渲染进程都准备好了，Browser Process 会向 Renderer Process发送 IPC 消息来确认导航。此时，浏览器进程将准备好的数据发送给渲染进程，渲染进程接收到数据之后，又发送 IPC 消息给浏览器进程，告诉浏览器进程导航已经提交页面开始加载。

这个时候导航栏会更新，安全指示符更新（地址前面的小锁），访问历史列表（history tab）更新，即可以通过前进后退来切换该页面。

5.6 初始化加载完成

当导航提交完成后，渲染进程开始加载资源及渲染页面，当页面渲染完成后（页面及内部的 ifram e都触发了 onload 事件），会向浏览器进程发送 IPC 消息，告知浏览器进程，这个时候UI thread会停止展示 tab 中的加载中图标。

六、网页渲染原理

导航过程完成之后，浏览器进程把数据交给了渲染进程，渲染进程负责 tab 内的所有事情，核心目的就是将 HTML/CSS/JS 代码，转化为用户可进行交互的 web 页面。那么渲染进程是如何工作的呢？

渲染进程中，包含线程分别是：

  1. 一个主线程（main thread）
  2. 多个工作线程（work thread）
  3. 一个合成器线程（compositor thread）
  4. 多个光栅化线程（raster thread）

6.1 构建DOM

当渲染进程接受到导航的确认信息后，开始接受来自浏览器进程的数据，这个时候，主线程会解析数据转化为 DOM（Document Object Model）对象。DOM 为 WEB开发人员通过 JavaScript 与网页进行交互的数据结构及 API。

6.2 子资源加载

在构建DOM的过程中，会解析到图片、CSS、JavaScript脚本等资源，这些资源是需要从网络或者缓存中获取的，主线程在构建 DOM 过程中如果遇到了这些资源，逐一发起请求去获取，而为了提升效率，浏览器也会运行预加载扫描（preload scanner）程序，如果HTML中存在img、link等标签，预加载扫描程序会把这些请求传递给Browser Process的Network thread进行资源下载。

6.3 JavaScript 的下载与执行

构建DOM过程中，如果遇到<script>标签，渲染引擎会停止对 HTML 的解析，而去加载执行 JS 代码，原因在于 JS 代码可能会改变 DOM 的结构（比如执行document.write()等API）。不过开发者其实也有多种方式来告知浏览器应对如何应对某个资源，比如说如果在<script>标签上添加了 async 或 defer 等属性，浏览器会异步的加载和执行 JS 代码，而不会阻塞渲染。

6.4 样式计算 - Style calculation

DOM 树只是我们页面的结构，我们要知道页面长什么样子，我们还需要知道 DOM 的每一个节点的样式。主线程在解析页面时，遇到<style>标签或者<link>标签的 CSS 资源，会加载 CSS 代码，根据 CSS 代码确定每个 DOM 节点的计算样式（computed style）。

计算样式是主线程根据 CSS 样式选择器（CSS selectors）计算出的每个 DOM 元素应该具备的具体样式，即使你的页面没有设置任何自定义的样式，浏览器也会提供其默认的样式。

6.5 布局 - Layout

DOM 树和计算样式完成后，我们还需要知道每一个节点在页面上的位置，布局（Layout）其实就是找到所有元素的几何关系的过程。

主线程会遍历 DOM 及相关元素的计算样式，构建出包含每个元素的页面坐标信息及盒子模型大小的布局树（Render Tree），遍历过程中，会跳过隐藏的元素（display: none），另外，伪元素虽然在 DOM 上不可见，但是在布局树上是可见的。

6.5 绘制 - Paint

布局 layout 之后，我们知道了不同元素的结构，样式，几何关系，我们要绘制出一个页面，我们要需要知道每个元素的绘制先后顺序，在绘制阶段，主线程会遍历布局树（layout tree），生成一系列的绘画记录（paint records）。绘画记录可以看做是记录各元素绘制先后顺序的笔记。

6.5 合成 - Compositing

文档结构、元素的样式、元素的几何关系、绘画顺序，这些信息我们都有了，这个时候如果要绘制一个页面，我们需要做的是把这些信息转化为显示器中的像素，这个转化的过程，叫做光栅化（rasterizing）。

那我们要绘制一个页面，最简单的做法是只光栅化视口内（viewport）的网页内容，如果用户进行了页面滚动，就移动光栅帧（rastered frame）并且光栅化更多的内容以补上页面缺失的部分，如下：

Untitled

Chrome 第一个版本就是采用这种简单的绘制方式，这一方式唯一的缺点就是每当页面滚动，光栅线程都需要对新移进视图的内容进行光栅化，这是一定的性能损耗，为了优化这种情况，Chrome 采取一种更加复杂的叫做合成（compositing）的做法。

那么，什么是合成？合成是一种将页面分成若干层，然后分别对它们进行光栅化，最后在一个单独的线程 - 合成线程（compositor thread）里面合并成一个页面的技术。当用户滚动页面时，由于页面各个层都已经被光栅化了，浏览器需要做的只是合成一个新的帧来展示滚动后的效果罢了。页面的动画效果实现也是类似，将页面上的层进行移动并构建出一个新的帧即可。

Untitled

为了实现合成技术，我们需要对元素进行分层，确定哪些元素需要放置在哪一层，主线程需要遍历渲染树来创建一棵层次树（Layer Tree），对于添加了 will-change CSS 属性的元素，会被看做单独的一层，没有 will-change CSS属性的元素，浏览器会根据情况决定是否要把该元素放在单独的层。

Untitled

你可能会想要给页面上所有的元素一个单独的层，然而当页面的层超过一定的数量后，层的合成操作要比在每个帧中光栅化页面的一小部分还要慢，因此衡量你应用的渲染性能是十分重要的一件事情。

一旦 Layer Tree被创建，渲染顺序被确定，主线程会把这些信息通知给合成器线程，合成器线程开始对层次数的每一层进行光栅化。有的层的可以达到整个页面的大小，所以合成线程需要将它们切分为一块又一块的小图块（tiles），之后将这些小图块分别进行发送给一系列光栅线程（raster threads）进行光栅化，结束后光栅线程会将每个图块的光栅结果存在GPU Process的内存中。

Untitled

为了优化显示体验，合成线程可以给不同的光栅线程赋予不同的优先级，将那些在视口中的或者视口附近的层先被光栅化。

当图层上面的图块都被栅格化后，合成线程会收集图块上面叫做绘画四边形（draw quads）的信息来构建一个合成帧（compositor frame）。

  • 绘画四边形：包含图块在内存的位置以及图层合成后图块在页面的位置之类的信息；
  • 合成帧：代表页面一个帧的内容的绘制四边形集合。

以上所有步骤完成后，合成线程就会通过 IPC 向浏览器进程（browser process）提交（commit）一个渲染帧。这个时候可能有另外一个合成帧被浏览器进程的UI线程（UI thread）提交以改变浏览器的 UI。这些合成帧都会被发送给 GPU 从而展示在屏幕上。如果合成线程收到页面滚动的事件，合成线程会构建另外一个合成帧发送给 GPU 来更新页面。

Untitled

合成的好处在于这个过程没有涉及到主线程，所以合成线程不需要等待样式的计算以及 JavaScript 完成执行。这就是为什么合成器相关的动画 最流畅，如果某个动画涉及到布局或者绘制的调整，就会涉及到主线程的重新计算，自然会慢很多。

当页面渲染完毕以后，tab 内已经显示出了可交互的 WEB 页面，用户可以进行移动鼠标、点击页面等操作了，而当这些事件发生时候，浏览器是如何处理这些事件的呢？

七、浏览器对事件的处理

以点击事件（click event）为例，让鼠标点击页面时候，首先接受到事件信息的是Browser Process，但是Browser Process只知道事件发生的类型和发生的位置，具体怎么对这个点击事件进行处理，还是由Tab内的Renderer Process进行的。Browser Process接受到事件后，随后便把事件的信息传递给了渲染进程，渲染进程会找到根据事件发生的坐标，找到目标对象（target），并且运行这个目标对象的点击事件绑定的监听函数（listener）。

Untitled

渲染进程中合成器线程接收事件

前面我们说到，合成器线程可以独立于主线程之外通过已光栅化的层创建组合帧，例如页面滚动，如果没有对页面滚动绑定相关的事件，组合器线程可以独立于主线程创建组合帧，如果页面绑定了页面滚动事件，合成器线程会等待主线程进行事件处理后才会创建组合帧。那么，合成器线程是如何判断出这个事件是否需要路由给主线程处理的呢？

由于执行 JS 是主线程的工作，当页面合成时，合成器线程会标记页面中绑定有事件处理器的区域为非快速滚动区域(non-fast scrollable region)，如果事件发生在这些存在标注的区域，合成器线程会把事件信息发送给主线程，等待主线程进行事件处理，如果事件不是发生在这些区域，合成器线程则会直接合成新的帧而不用等到主线程的响应。

Untitled

而对于非快速滚动区域的标记，开发者需要注意全局事件的绑定，比如我们使用事件委托，将目标元素的事件交给根元素 body 进行处理，代码如下：

document.body.addEventListener('touchstart', event => {
  if (event.target === area) {
    event.preventDefault()
  }
})

在开发者角度看，这一段代码没什么问题，但是从浏览器角度看，这一段代码给 body 元素绑定了事件监听器，也就意味着整个页面都被编辑为一个非快速滚动区域，这会使得即使你的页面的某些区域没有绑定任何事件，每次用户触发事件时，合成器线程也需要和主线程通信并等待反馈，流畅的合成器独立处理合成帧的模式就失效了。

Untitled

其实这种情况也很好处理，只需要在事件监听时传递passtive参数为 true，passtive会告诉浏览器你既要绑定事件，又要让组合器线程直接跳过主线程的事件处理直接合成创建组合帧。

document.body.addEventListener('touchstart', event => {
    if (event.target === area) {
        event.preventDefault()
    }
 }, {passive: true});

查找事件的目标对象（event target）

当合成器线程接收到事件信息，判定到事件发生不在非快速滚动区域后，合成器线程会向主线程发送这个时间信息，主线程获取到事件信息的第一件事就是通过命中测试（hit test）去找到事件的目标对象。具体的命中测试流程是遍历在绘制阶段生成的绘画记录（paint records）来找到包含了事件发生坐标上的元素对象。

Untitled

浏览器对事件的优化

一般我们屏幕的帧率是每秒 60 帧，也就是60fps，但是某些事件触发的频率超过了这个数值，比如 wheel，mousewheel，mousemove，pointermove，touchmove，这些连续性的事件一般每秒会触发 60~120 次，假如每一次触发事件都将事件发送到主线程处理，由于屏幕的刷新速率相对来说较低，这样使得主线程会触发过量的命中测试以及JS代码，使得性能有了没必要是损耗。

Untitled

出于优化的目的，浏览器会合并这些连续的事件，延迟到下一帧渲染是执行，也就是requestAnimationFrame之前。

Untitled

而对于非连续性的事件，如keydown，keyup，mousedown，mouseup，touchstart，touchend等，会直接派发给主线程去执行。

总结

浏览器的多进程架构，根据不同的功能划分了不同的进程，进程内不同的使命划分了不同的线程，当用户开始浏览网页时候，浏览器进程进行处理输入、开始导航请求数据、请求响应数据，查找新建渲染进程，提交导航，之后渲染又进行了解析 HTML 构建 DOM、构建过程加载子资源、下载并执行 JS 代码、样式计算、布局、绘制、合成，一步一步的构建出一个可交互的 WEB 页面，之后浏览器进程又接受页面的交互事件信息，并将其交给渲染进程，渲染进程内主进程进行命中测试，查找目标元素并执行绑定的事件，完成页面的交互。

相关参考链接

前端都该懂的浏览器工作原理，你懂了吗？