浏览器进程的理解与研究

avatar
Ctrl+C、V工程师 @豌豆公主

浏览器是每一位前端工程师都需要学习的一个模块。了解它,可以让你直到我们的js是怎么跑起来的,页面又是怎么渲染的,同时我怎么布局可以让页面的性能更好,等等。因此决定静下新来好好研究一下。

从进程与线程开始

回顾进程与线程

什么是进程

进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)

什么是线程

线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位,一个进程中可以有多个线程)

总结

进程可以看成是一个工厂,工厂与工厂之间相互独立,也就是说:进程之间相互独立 线程就是工厂中的工人,一个工厂里可以有好几个工人,他们相互协作,也就说,一个进程下可以有多个线程,当然也可以只有一个(工人)线程 工厂的资源也就是系统分配的内存空间

浏览器是单进程还是多进程

这个其实并没有标准的答案,只是希望同学们可以自己发散一下假如是你设计一个浏览器你会用单进程还是多进程
但实际上浏览器可以是单进程,也可以是多进程。每个厂家都有自己的实现方案,所以这并不是一个统一的标准

单进程多线程应用

单进程
如图所示,我们可以创建一个主进程,然后这个进程可以分配出多个线程,多线程其实有很多好处,凭借我有限的知识我认为可以有这些好处:

  1. 在很多场景下会提高效率,因为内存是可以共享的。
  2. 能减少内存的占用。
  3. 减少进程间的IPC通信,挺高性能。
  • 欢迎大家留言增加....

但是实际上他的问题也很多:

  1. 稳定性更高,如果进程崩溃就需要全部重新启动。
  2. 安全性不行,有些私密信息很容易被获取到。
  • 欢迎大家留言增加....

多进程应用

多进程
如图所示,我们可以创建多个进程,然后这几个进程就可以通过互相通信进行配合以及协调工作。
进程与进程之前是通过IPC进行通信进程之间的通信示意
可以有这些好处:

  1. 稳定性更好,一个进程崩溃不会影响到其他进程。
  2. 安全性更好,主进程的数据可以选择不让其他进程获取。
  • 欢迎大家留言增加....

但是实际上他的问题也很多:

  1. 如果只是单页面的话就会非常耗内存。
  • 欢迎大家留言增加....

当然,Chrome其实本身也是对这些进行了优化,他也知道多进程耗费内存,单进程下多线程效率高等,因此他们在官方文章里也说了

When Chrome is running on powerful hardware, it may split each service into different processes giving more stability, but if it is on a resource-constraint device, Chrome consolidates services into one process saving memory footprint.

在一些情况下,比如:UI、 Network等进程可能会被下调为主进程(Browser Process)下线程

浏览器中我们常见的进程

Browser process(浏览器的主进程)

他主要负责协调与主控,比如我们一些顶部的交互按钮,前进、后退、刷新等,创建和销毁其他进程,界面的展示...

Plugin process(三方插件的进程)

每一个插件有独立的进程,防止某一个进程要是挂掉了,影响其他的进程工作。

Network process(三方插件的进程)

主要负责网络资源的加载等。

GPU process(三方插件的进程)

将GPU任务与其他进程隔离。因为GPU处理会来自多个进程的请求并将它们绘制在同一表面上。

Render process(渲染进程)

用于渲染页面,执行脚本,处理事件等等。

Chromium的几种进程模式

我们之前也说Chrome在某些情况下会合并一些进程,成为单进程下的多线程,但是这是一种模式。那接下来我们可以详细了解一下,具体有哪几种进程模式。

首先我们科普一些概念:

  1. site 指的是相同的 registered domain name
    比如 https://z.baidu.com 和 https://b.baidu.com 就可以理解为同一个 site
  2. site-instance 满足下面两中情况并且打开的新页面和旧页面属于上面定义的同一个 site,就属于同一个 site-instance
    • 用户通过<a target="_blank">这种方式点击打开的新页面
    • JavaScript code 打开的新页面(比如 window.open)

Process-per-tab(每个 tab 使用一个进程)

这个很好理解,就是每个tab单独一个进程,有点烧内存。

Single process(所有 tab 共用一个进程)

这个反之,所有的tab共用一个进程。

Process-per-site(同一个 site 使用一个进程)

这个大家可以这么理解,假如我点开了两个网页一个是m.wandougongzhu.com,一个是activity.wandougongzhu.com,那么这两个tab就会共用同一个进程,那我们考虑一下,假如你在m.wandougongzhu.com里边写了一个bug,引起页面崩溃,那么实际上activity.wandougongzhu.com也会跟着崩溃,因为他俩属于一个进程。

Process-per-site-instance(同一个 site-instance 使用一个进程)--> 默认模式

这个大家可以这么理解,假如我点开了两个网页一个是m.wandougongzhu.com,一个是activity.wandougongzhu.com,那么这两个tab就会启动两个进程,但是,假如在m.wandougongzhu.com里边通过a标签或者location.href打开了activity.wandougongzhu.com那么他俩属于一个进程。

里程碑的iframe

这里有一个比较有意思的是我们常用的iframe从Chrome 67开始,因为默认启用Site Isolution机制,就会变成一个单独的进程,这个改动按照Chrome官方的说法是里程碑式的,因为这个独立出去进程,和以往不断叠加进程不同,他的改动会牵扯到我们的调试进程,也就是我们常用的调试工具,等等。