打开一个页面，浏览器背后会做什么?🤔

# 前瞻

作为一名前端er，浏览器一定是绕不过去的。当然，这里始终以Chrome浏览器为例，毕竟它是浏览器界中的佼佼者，因此，研究Chrome就够了。

# 浏览器的单进程架构

早期，浏览器都是单进程的。顾名思义，浏览器的所有功能模块都运行在同一个进程内，这导致了当时的浏览器无法处理太多的任务，从而导致浏览器出现不稳定、崩溃的问题。

📌

• • 早期浏览器需要借助插件来实现强大的功能，但如果插件出现了问题，浏览器也会随之崩溃
• • 上图中，页面渲染、页面展示、JavaScript执行以及插件的运行都是在同一个线程中，这就意味着同一时刻只能有一个模块可以执行。
  • 但如果JavaScript代码中出现了无限循环的情况，它会独占一个线程，导致其他模块无法被执行，也就无法及时地处理任务，从而导致整个浏览器失去响应，变得卡顿。
  • 同样地，页面的内存泄露也是单进程变慢的一个原因。运行一个复杂点的页面再关闭页面，会存在内存不能完全回收的情况，这导致了使用时间越长，内存占用就越高，浏览器就变得越来越慢了。
• • 说到不安全，也能扯上插件了。因为插件是运行在浏览器进程之中，倘若插件包含恶意的行为，那么它就会引发安全性问题。
  • 除了插件可以引发安全性问题，页面脚本也是一大因素。它可以通过浏览器的漏洞来获取系统权限，获取系统权限之后，也可以做一些恶意的事情。

# 浏览器的多进程架构

问题出现了就解决它，于是浏览器来到了多进程的时代，使得浏览器的性能得到了大幅提升。

上图为浏览器的多进程架构，与之前的单进程架构进行对比，可以发现：

✨总的来说：

多进程架构下的Chrome浏览器包括了

• 浏览器主线程
  • 负责界面展示、用户交互、子进程管理等职责，同时提供存储等功能
• 渲染进程
  • 主要职责是将HTML、CSS、JavaScript转换为可以与用户进行交互的网页，排版引擎Blink和JavaScript引擎V8都是运行在该进程中。默认情况下，Chrome会为每个Tab标签创建一个渲染进程，而渲染进程都是运行在沙箱中的。
• GPU进程
  • GPU进程是为了实现3D CSS，而今天Chrome团队也发布了Web GPUopen in new window，使得在Web上能够进行高性能3D图像和数据并行计算。
• 网络进程
  • 主要负责页面的网络资源加载。
• 插件进程
  • 主要负责插件的运行，同时插件进程也是运行在沙箱中，但并不是所有系统都适用。

📌

• 解决单进程架构的不稳定
  • ，而Chromium IPC是基于Mojo的，关于更多Chromium IPC可以看这篇文章《深入分析Chromium IPC》open in new window。
• 解决单进程架构的不流畅
  • 关于内存泄露的问题：
• 解决单进程架构的不安全
  • 多进程架构的额外好处就是可以使用
  • 在多进程架构的Chrome浏览器中，至此，解决了单进程架构的不安全问题。

# 总结

那么，到这里我们就明白了，打开一个页面，浏览器在背后做了什么？

打开1个页面至少需要1个网络进程、1个浏览器主线程、1个GPU进程以及1个渲染进程，一共4个进程。倘若打开的页面有运行插件的话，还需要再加上1个插件进程。