深入解析浏览器事件循环：单线程异步的引擎（含进程/线程、任务队列、面试题）

前端缘梦
149 阅读10分钟

单线程是异步产生的原因

事件循环是异步的实现方式

摘要：  JavaScript 运行在浏览器的单线程渲染主线程上，如何做到“不卡死”并高效处理海量任务？答案就是事件循环（Event Loop） 。本文从浏览器底层架构出发，清晰阐述：

  1. 进程与线程的本质区别及其在浏览器（多进程多线程应用）中的应用（浏览器进程、网络进程、渲染进程）。
  2. 渲染主线程的繁忙工作与消息队列（任务队列）  的调度机制，揭秘事件循环的核心工作原理。
  3. 异步编程的必然性：为何单线程需要异步？浏览器如何通过其他线程协作实现异步（如计时器、网络请求、事件监听）？
  4. 任务队列的优先级演变：从宏/微队列到更复杂的多队列模型（延时队列、交互队列、微队列），详解 W3C 标准和 Chrome 实现。
  5. 经典面试题精析：JS 为何是单线程？如何理解事件循环？setTimeout 为何不精确？附带清晰解答。
    透彻理解事件循环，是掌握 JavaScript 异步编程、性能优化和浏览器原理的基石。

一、基础：进程与线程

1.何为进程

程序运行需要它自己专属的内存空间，可以把这块内存空间简单的理解为进程。每个应用至少有一个进程，进程之间相互独立，即便要通信，也需要双方同意。

进程之所以这样设置，就是为了隔离，比如说qq内部出现了问题，不会影响到微信。

2.何为线程

有了进程之后，就可以运行程序的代码了，运行代码的'人'称之为线程。一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程，如果主线程结束了，整个程序就结束了。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

3.浏览器有哪些进程和线程

浏览器是一个多进程多线程的应用程序。

浏览器的内部工作极其复杂，为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

其中，最主要的进程有：

  1. 浏览器进程

主要负责界面显示（浏览器 UI，非网页内容）、用户交互（地址栏、书签、前进后退等）、子进程管理（创建/销毁其他进程） ，浏览器内部会启动多个线程处理不同的任务。

  • 界面显示： 不是页面的显示，而是 image.png

  • 用户交互： 比如说用户在浏览器窗口用鼠标点击了什么，鼠标滑轮滚动，键盘输入了什么。

  • 子进程管理（了解一下）：像网络进程、渲染进程都是浏览器进程启动起来的，一开始只有浏览器进程，然后会启动多个进程，都是浏览器进程启动起来的。

  1. 网络进程

负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

  1. 渲染进程

渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML,CSS,JS 代码， 转换为用户可交互的网页。

默认情况下，浏览器会为每一个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

二、核心：渲染主线程是如何进行工作的与事件循环

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

  • 解析 HTML
  • 解析 CSS
  • 计算样式
  • 布局
  • 处理图层
  • 每秒把页面画60次 FPS(帧率)
  • 执行全局 JS 代码
  • 执行事件处理函数
  • 执行计时器的回调函数

1.解决方案：任务队列 + 事件循环

渲染主线程要处理那么多的任务，主线程该如何调度任务

渲染主线程用 排队 来处理这个问题

  1. 在最开始的时候，渲染主线程会进入一个无限循环
  2. 每一次循环都会检查消息队列中有没有任务存在，如果有，则取出第一个任务，执行完一个进入下一次循环，如果没有，则进入休眠状态。
  3. 其他所有进程（如网络线程、定时器线程、IO线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾，在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务。

这样一来，就可以让每个任务有条不紊、持续的进行下去了。

整个过程，被称之为事件循环(消息循环)

2.异步的必然性

问题： 代码在执行过程中，会遇到一些无法立即处理的任务，比如：

  • 计时完成后需要执行的任务 -- setTimeout 、 setInterval
  • 网络通信完成后需要执行的任务 -- XHR 、 Fetch
  • 用户操作后需要执行的任务 -- addEventListener

如果让渲染主线程等待这些任务的时机到达，就会导致主线程长期处于 阻塞 的状态，从而导致浏览器卡死。

渲染主线程承担着极其重要的工作，无论如何都不能阻塞

解决方案：因此，浏览器选择异步来解决这个问题，使用异步的方式

  • 当遇到不能立即处理的耗时任务（setTimeout, fetch, addEventListener）时：
    1. 主线程立即将该任务移交给浏览器其他线程（网络线程、定时器线程等）处理。
    2. 主线程继续执行后续同步代码。
    3. 其他线程处理完任务后，将对应的回调函数包装成任务，放入任务队列末尾。
    4. 主线程在事件循环的后续轮次中，从队列中取出并执行这些回调任务。
  • 结果： 渲染主线程永不阻塞，保证了页面的流畅性。

面试题：如何理解 JS 的异步

JS 是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

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

三、演进：任务队列的优先级

任务没有优先级，在消息队列中先进先出。

但消息队列是有优先级的

1. 现代任务队列模型

  • 核心原则：
    • 任务按类型分类。
    • 同类型的任务必须在同一个队列。
    • 不同类型的任务可以属于不同的队列。
    • 不同的任务队列具有不同的优先级。
    • 在单次事件循环 (Event Loop Turn) 中，浏览器根据自身策略决定从哪个（些）队列中取出哪个任务执行。
  • 关键要求：
    • 浏览器必须维护一个 微任务队列 (Microtask Queue)。
    • 微任务队列 中的任务具有最高优先级，必须在本次事件循环中清空所有微任务后，才会考虑执行其他队列的任务。常见的产生微任务的方式：
      • Promise 的 then/catch/finally 回调
      • MutationObserver 回调
      • queueMicrotask() API
  • Chrome 中的常见队列示例 (优先级从高到低)：
    1. 微任务队列 (Microtask Queue)： Promise.then, MutationObserver, queueMicrotask。 (最高优先级，必须清空)
    2. 交互队列 (User Interaction Queue)： 用户操作产生的事件（如 click, mousemove, keydown）。 (高优先级)
    3. 延时队列 (Timer Queue)： setTimeout, setInterval 到达时间的回调。 (中优先级)
    • (还可能存在如网络请求回调队列、历史变更队列等)

image.png

image.png

渲染主线程先执行全局 JS ，定时函数 0 秒后执行，也就从其他线程到延时队列中，然后又遇到了fn4函数，直接放到微队列中去，最后是打印 5 ，全局结束； 可以从队列中取出任务放到主线程，先看优先级最高的微队列放到主线程，fn4 打印 4 ；接下来是延时队列放到主线程，fn3函数，先打印 3 ，接下来打印在微队列中的 fn a ，先打印 1 ，再打印微队列中的 2；

面试题：阐述一下 JS 的事件循环

事件循环又称消息循环，是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在用一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题：JS 中的计时器能做到精确计时吗？为什么

不行，因为：

  1. 计算机硬件没有原子钟，无法做到精确计时。
  2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差。
  3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差。
  4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此带来了偏差。

4.总结

事件循环是 JavaScript 在浏览器单线程环境中实现高效、非阻塞异步编程的核心机制。深刻理解其背后的原理——包括浏览器的多进程/多线程架构、渲染主线程的工作方式、任务队列的调度（尤其是微任务队列的优先级）——对于编写高性能、响应迅速的 JavaScript 代码至关重要。它解释了代码的执行顺序、异步回调的执行时机，以及诸如 setTimeout 不精确等常见现象的原因。掌握这些知识是进阶前端开发者的必备基础。

avatar
文章
阅读
粉丝