我喜欢你>_<

目录#

• 目录
• 浏览器的进程模型
• 渲染主线程的工作原理
• 深入理解 JavaScript 的异步与事件循环
• 小结

浏览器的进程模型#

浏览器是一个多进程、多线程的应用程序。进程与线程的关系是一对多。浏览器主要包含三个核心进程：

• 浏览器进程
• 网络进程
• 渲染进程（包含一个渲染主线程）

面试高频 Q&A

Q: 为什么渲染进程不使用多个线程来处理任务（如操作 DOM）？ A:

1. DOM 线程不安全：多线程同时修改 DOM 会导致不可预知的问题。
2. 锁的性能差：为了保证线程安全而引入锁机制，会大幅降低渲染性能。
3. JS 是单线程语言：这决定了其执行环境必须是单线程的。

渲染主线程的工作原理#

渲染主线程的生命周期可以概括为以下几个步骤：

1. 无限循环：主线程开启一个不会结束的 for 循环。
2. 获取任务：每次循环时，尝试从消息队列（任务队列）中取出一个任务执行。如果队列为空，主线程则进入休眠状态。
3. 添加任务：其他线程在合适的时机将任务添加到消息队列的末尾，并唤醒处于休眠状态的主线程。

提示：任务本身没有优先级之分，但任务队列有优先级。在所有队列中，**微队列（Microtask Queue）**的优先级最高，必须优先调度执行。

深入理解 JavaScript 的异步与事件循环#

面试高频 Q&A

Q: 如何理解 JavaScript 的异步机制？ A: JavaScript 是一门单线程语言，运行在浏览器唯一的渲染主线程中。如果采用同步方式执行耗时操作，会直接阻塞页面的渲染和交互。为了避免这种情况，浏览器采用了异步机制。

具体运作过程如下： 当发生诸如计时器（setTimeout）、网络请求或事件监听等耗时任务时，主线程会将这些任务交由其他相关线程去处理，自身则立即结束该任务的执行，转而继续执行后续的同步代码。当其他线程完成处理后，会将预先传递的回调函数包装成一个任务，加入到消息队列的末尾排队，等待主线程的调度执行。

在这种异步模式下，浏览器能够永不阻塞，从而最大程度地保证了单线程的流畅运行。

面试高频 Q&A

Q: 详细介绍一下浏览器的事件循环（Event Loop） A: 事件循环（或称消息循环）正是浏览器渲染主线程的核心工作方式。

在 Chrome 的浏览器源码实现中，正是通过开启一个无尽的 for 循环，不断从消息队列中取出首个任务执行。而其他线程只需将需要执行的回调任务追加至队列末尾。

过去，我们常把消息队列简单地分为“宏队列”和“微队列”。然而，随着浏览器环境的日益复杂，这种简单的二分法已不再适用，取而代之的是一种更加灵活、精细的调度方式。

根据 W3C 官方的解释：

• 每个任务都具有不同的类型。
• 同类型的任务必须放在同一个队列中。
• 不同类型的任务可以属于不同的队列。
• 不同的任务队列享有不同的优先级。

在每一次事件循环中，由浏览器自行决定从哪一个队列中取出任务执行。但是，浏览器必须包含一个微队列（Microtask Queue），并且微队列的任务始终具有最高的执行优先级，必须被优先调度和执行。

小结#

“单线程是异步产生的原因，事件循环则是异步的具体实现方式。”

理解这两者的关系与底层细节，是掌握 JavaScript 运行机制的重中之重。