浏览器架构演进
现代大多浏览器都是多进程架构，由于浏览器有多种，每种厂商的实现有差异，没有形成统一的规范，这里面以chrome为例。
早期单进程浏览器
单进程浏览器是指所有功能模块（网络、插件、JS 运行环境、渲染引擎、页面等）都运行在同一进程中的浏览器（早期的 IE、Firefox）。
如此多的功能模块运行在一个进程里，是导致单进程浏览器不稳定、不流畅和不安全的一个主要因素。
-
不稳定
- 浏览器中的插件运行在浏览器的进程之中，插件的崩溃会引起整个浏览器的崩溃；
- 渲染引擎通常也是不稳定的，例如复杂的 JS 脚本也会引起渲染引擎的崩溃，最终导致浏览器崩溃。
-
不流畅
- CPU 在某个时间点只能执行某个进程中的某一条线程。由于单进程浏览器中所有的页面的各种模块都在同一线程中运行，即同一时刻只能有一个模块可以执行。
- 当一个页面的某个模块阻塞了该线程，就会导致整个浏览器失去响应；此外，页面的内存泄漏也会导致单进程浏览器使用时间越长，反应越慢。
-
不安全
- 线程共享进程资源，因而插件就能获取到浏览器运行过程中的数据，以及拥有和浏览器同等的系统权限。
- 例如，插件可使用 C/C++ 编写，通过插件可以获取到操作系统任意资源；脚本也可以通过浏览器的漏洞来获取系统权限，引发安全问题。
现代多进程浏览器
我们打开一个chrome浏览器，会同时启动多个不同的进程，一般是浏览器进程、网络进程、GPU进程、渲染进程、如果调用插件，还会创建插件进程。默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程，如下图所示
- 浏览器进程
- Renderer渲染进程（沙箱运行）
- 网络进程（开始是在浏览器进程中，目前已独立出来，成为一个单独的进程）
- 插件进程
- GPU进程（开始是在浏览器进程中，目前已独立出来，成为一个单独的进程）
采用多进程浏览器相较于单进程浏览器，具有以下显著优势：多进程架构显著提升浏览器稳定性与性能，能有效防止单个页面或第三方插件的崩溃对整个浏览器造成影响。多进程架构能够有效利用多核资源，通过并行处理提高整体性能。同时，多进程架构使各进程能够通过沙盒模型进行隔离，提高浏览器的整体稳定性。当然，多进程浏览器在资源消耗方面有所增加，但这是为了确保更高的稳定性和性能所做出的必要妥协。
每个进程的的职责是：
浏览器进程： 浏览器最核心的进程，负责管理标签页的创建和销毁、浏览器顶部工具栏（前进，后退，收藏等）、子进程管理（创建/销毁其他进程），将Renderer进程得到的，绘制到用户界面上，提供存储、下载、网络资源管理等
渲染进程： 核心任务是接收网络进程加载的资源，HTML、CSS 和 JavaScript等，解析转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
网络进程： 主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。
GPU进程： 其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
插件进程： 负责每个第三方插件的使用，每个第三方插件使用时候都会创建一个对应的进程、这可以避免第三方插件crash影响整个浏览器、也方便使用沙盒模型隔离插件进程，提高浏览器稳定性，以保证插件进程崩溃不会对浏览器和页面造成影响。
多进程浏览器存在的问题：
- 更高的资源占用。以 Chrome 浏览器为例，其将为每个页面分配单独的渲染进程，为每个插件分配单独的插件进程，因此会消耗更多内存资源。
- 更复杂的体系架构。浏览器各个模块之间耦合度高、扩展性差目前的架构较难适应新需。
面向未来伸缩性弹性架构
为了解决多进程架构带来的问题
- 高的资源占用
- 复杂的体系架构
在2016年，Chrome官方团队使用“面向服务的架构”（类似于后端微服务）的思想设计了新的Chrome架构。也就是说 Chrome 整体架构会朝向现代操作系统所采用的“面向服务的架构” 方向发展，原来的各种模块会被重构成独立的服务，每个服务都可以在独立的进程中运行，访问服务必须使用定义好的接口，通过IPC来通信，从而构建一个更内聚、松耦合、易于维护和扩展的系统，更好实现简单、稳定、高速、安全的目标。新架构目前Chrome团队还在过渡阶段，未来会投入使用，尽情期待下，这里就不过多介绍了。
Chrome最终要把UI、数据库、文件、设备、网络等模块重构为基础服务，类似操作系统底层服务，下面是Chrome“面向服务的架构”的进程模型图
所谓的弹性架构是指，如果在资源受限的设备上Chrome会将很多服务整合到一个进程中，从而节省内存占用（如下图）。
但是在设备性能优越的机器上，会以多进程的方式运行基础服务，也会结合AI能力做智能化的管控，更具设备每刻的运转状态来看，如下图。
总结
浏览器从早期的单进程发展到现在的多进程，再到未来的微服务分治架构。都为了把浏览器打造更内聚、松耦合、易于维护和扩展的系统。而作为一名前端工程师在学习的过程中更关注的是人机交互这一块，就是最贴切的渲染进程，因此充分理解了渲染进程的运行机制，才能做出好的用户体验的产品。 我们先看几个网上面说了很多遍的问题
-
js操作dom非常耗费性能
-
js线程和ui线程是互斥的？它们是两个不同线程？还是？
