【JavaScript】 JS 的单线程和浏览器的多进程架构
概述
此外，JS 最初是为了解决⽹⻚交互的问题⽽诞⽣的，⽽⽹⻚交互的需求⼤部分是基于⽤户事件的，⽐如点击按钮、输⼊⽂本等。这些操作的响应速度要求很⾼，如果在响应事件的同时还要处理其他任务，可能会导致⽹⻚卡顿、响应变慢等⽤户体验不佳的问题。
为了利⽤多核 CPU 的计算能⼒，HTML5 提出 Web Worker 标准，允许 JS 脚本创建多个线程，但是⼦线程完全受主线程控制，且不得操作 DOM。所以，这个新标准并没有改变 JS 单线程的本质。
浏览器的多进程架构
“JS 是单线程的” 指的是执⾏ JS 的线程只有⼀个，是浏览器提供的 JS 引擎线程（主线程）。
如今的主流浏览器都是多进程架构的，以 Chrome 为例，它包含了 1 个浏览器主进程、1个 GPU 进程、1 个⽹络进程、多个渲染进程或多个插件进程。默认情况下，Chrome 会为每个 Tab 标签创建⼀个渲染进程。⼀个渲染进程通常由以下线程组成：
- JS 引擎线程（主线程）：
JavaScript 引擎，也称为 JS 内核，负责处理 JS 脚本，执⾏代码。当主线程空闲且任务队列不为空时，会依次取出任务执⾏。注意，该线程与 GUI 渲染线程互斥，当 JS 引擎线程执⾏ JS 时间过⻓，将导致⻚⾯渲染的阻塞。 - GUI 渲染线程：
主要负责⻚⾯的渲染，解析 HTML、CSS，构建DOM树，布局和绘制等。当界⾯需要重绘或者由于某种操作引发重排时，将执⾏该线程。注意：该线程与 JS 引擎线程互斥，当执⾏ JS 引擎线程时，GUI 线程会被挂起，当任务队列空闲时，主线程才会去执⾏ GUI 渲染。 - 事件触发线程：
⽤于控制事件循环，将准备好的事件交给 JS 引擎线程执⾏。当主线程遇到异步任务，如 setTimeOut（或 ajax 请求、⿏标点击事件），会将它们交由对应的线程处理，处理完毕后，事件触发线程会把对应的事件添加到任务队列的尾部，等待 JS 引擎的处理。注意：由于 JS 的单线程关系，队列中的待处理事件都得排队等待，只有在 JS 引擎空闲时才能被执⾏。 - 定时器触发线程：
负责执⾏定时器⼀类函数的线程，如 setTimeout，setInterval 等。主线程依次执⾏代码时，遇到定时器，会将定时器交由该线程进⾏计时，当计时结束，事件触发线程会将定时器的回调函数添加到任务队列的尾部，等待 JS 引擎空闲后执⾏。 - 异步 http 请求线程：
负责执⾏异步请求⼀类的函数的线程，如 Promise，axios，ajax 等。主线程依次执⾏代码时，遇到异步请求，会将函数交给该线程处理。当监听到状态码变更，如果设置有回调函数，事件触发线程会将相应的回调函数添加到任务队列的尾部，等待 JS 引擎空闲后执⾏。