浏览器多进程到JS单线程（上）

目录

• 进程和线程（上）* 浏览器是多进程（上）* 浏览器都包含哪些进程* 浏览器多进程的优势和问题* 浏览器内核（渲染进程）* Browser进程和浏览器内核（Renderer进程）的通信过程* 输入URL到页面显示，经历了什么* 浏览器内核中线程之间的关系（上）* GUI渲染线程与JS引擎线程互斥* WebWorker与SharedWorker* 浏览器中的JavaScript执行机制（中）* V8工作原理（中）* 从Event Loop谈JS的运行机制（下）* 事件循环进阶：macrotask与microtask（下）* 参考资料（下）进程和线程

---

线程是不能单独存在的，它是由进程来启动和管理的；线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率。

一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

1.进程中的任意一线程执行出错，都会导致整个进程的崩溃。
2.线程之间共享进程中的数据。
3.当一个进程关闭之后，操作系统会回收进程所占用的内存。
4.进程之间的内容相互隔离。

区别

• 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
• 线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）

浏览器是多进程的

浏览器是多进程的

浏览器都包含哪些进程？

目前Chrome 多进程架构：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。

（为了简化理解，仅列举主要进程）

1.Browser进程：浏览器的主进程；主要负责界面显示、用户交互、子进程管理，同时提供存储等功能（协调、主控）；只有一个。* 负责浏览器界面显示，与用户交互。如前进，后退等* 负责各个页面的管理，创建和销毁其他进程* 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上* 网络资源的管理，下载等
2.GPU进程：最多一个，用于3D绘制等。3.渲染进程：（浏览器内核）（Renderer进程，内部是多线程的）默认每个Tab页面一个进程，都是运行在沙箱模式下，互不影响。* 将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页* 排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中
4.网络进程：主要负责页面的网络资源加载。5.第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建。因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。### 浏览器多进程的优势和问题

优点

• 避免单个page crash、第三方插件crash影响整个浏览器
• 多进程充分利用多核优势
• 方便使用沙盒模型隔离插件等进程，提高浏览器稳定性

缺点

• 更高的资源占用。因为每个进程都会包含公共基础结构的副本（如 JavaScript 运行环境），这就意味着浏览器会消耗更多的内存资源。
• 更复杂的体系架构。浏览器各模块之间耦合性高、扩展性差等问题，会导致现在的架构已经很难适应新的需求了。

浏览器内核（渲染进程）

1.GUI渲染线程* 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。* 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行* 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
2.JS引擎线程* 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）* JS引擎线程负责解析Javascript脚本，运行代码。* JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序* 同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。
3.事件触发线程* 归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）* 当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中* 当对应的事件符合触发条件被触发时，该线程会