面试官：浏览器事件循环机制是怎么样的？

你别睡这么晚
242 阅读5分钟

问题：浏览器事件循环机制是怎么样的？

解答：
浏览器的事件循环（Event Loop）是 JavaScript 运行时的核心机制，它决定了代码如何执行、任务如何调度以及异步操作如何处理。理解事件循环对于编写高效的异步代码和避免常见的性能问题至关重要。

1. JavaScript 是单线程的

  • JavaScript 是单线程语言，意味着它在同一时间只能执行一个任务。为了处理多个任务，JavaScript 使用了事件循环来管理任务的执行顺序。
  • 由于是单线程，JavaScript 不能同时执行多个任务，因此需要一种机制来确保任务能够按顺序执行，而不会阻塞主线程。

2. 任务队列（Task Queues）

  • 浏览器中有多个任务队列（Task Queues），用于存储不同类型的任务。每个任务队列中的任务会按照“先进先出”（FIFO）的原则依次执行。

  • 主要有两种类型的任务队列：

    • 宏任务（Macrotask） ：包括 setTimeout、setInterval、I/O 操作、UI 渲染 等。
    • 微任务（Microtask） ：包括 Promise 的 then/catch/finally 回调、MutationObserver、process.nextTick（Node.js 中）等。

3. 事件循环的工作流程

事件循环的基本工作流程如下：

  1. 执行同步代码：首先，浏览器会执行当前的同步代码（即主线程上的代码）。这是最优先执行的部分。
  2. 处理微任务队列：当同步代码执行完毕后，浏览器会检查微任务队列。如果有微任务（如 Promise 的回调），它们会立即被执行，直到微任务队列为空。注意，微任务会在每次宏任务结束时执行，且在渲染之前。
  3. 渲染页面：在所有微任务执行完毕后，浏览器会进行一次页面渲染（如果有必要）。这包括更新 DOM、样式计算、布局、绘制等。
  4. 处理宏任务队列：接下来，浏览器会从宏任务队列中取出一个任务并执行。每次只执行一个宏任务，执行完后再次进入微任务队列，检查是否有新的微任务需要执行。
  5. 重复上述过程：事件循环会不断重复这个过程，直到所有任务都完成。

4. 宏任务与微任务的区别

  • 宏任务：宏任务之间的执行是互斥的，每次只能执行一个宏任务。宏任务执行完后，浏览器会检查微任务队列，并在渲染之前执行所有微任务。

    • 常见的宏任务：

      • setTimeout
      • setInterval
      • requestAnimationFrame（虽然它是宏任务，但会在下一次重绘之前执行）
      • I/O 操作
      • UI 渲染

  • 微任务：微任务会在每次宏任务执行完毕后立即执行，直到微任务队列为空。微任务的优先级高于宏任务，且不会阻塞渲染。

    • 常见的微任务：

      • Promise 的 then/catch/finally 回调
      • MutationObserver
      • process.nextTick（Node.js 中）

5. 事件循环的实例

让我们通过一个具体的例子来理解事件循环的工作方式：

console.log('同步代码开始');

setTimeout(() => {
  console.log('宏任务: setTimeout');
}, 0);

new Promise((resolve) => {
  console.log('Promise 执行');
  resolve();
}).then(() => {
  console.log('微任务: Promise then');
});

console.log('同步代码结束');

执行顺序：

  1. 同步代码：首先执行同步代码，输出：

    同步代码开始
Promise 执行
同步代码结束

  2. 微任务队列：同步代码执行完毕后，浏览器检查微任务队列，发现有一个 Promise 的 then 回调，执行它，输出：

    微任务: Promise then

  3. 宏任务队列：接下来，浏览器从宏任务队列中取出 setTimeout，执行它，输出：

    宏任务: setTimeout

因此，最终的输出顺序是：

同步代码开始
Promise 执行
同步代码结束
微任务: Promise then
宏任务: setTimeout

6. 事件循环的优化技巧

  • 避免长时间的同步任务：长时间的同步任务会阻塞事件循环，导致页面卡顿。可以通过将大任务拆分为多个小任务，使用 setTimeout 或 requestAnimationFrame 来分批执行。
  • 合理使用宏任务和微任务：微任务的优先级高于宏任务，因此可以利用微任务来处理一些需要尽快执行的任务。例如，Promise 的回调可以用于处理异步操作的结果，而不需要等待下一个宏任务。
  • 避免过度嵌套的 Promise：虽然 Promise 是非常强大的工具，但过度嵌套的 Promise 可能会导致代码难以维护。可以考虑使用 async/await 来简化异步代码的编写。

7. 进一步探讨

  1. 你是否理解为什么 Promise 的回调会在 setTimeout 之前执行？
    这是因为 Promise 的回调属于微任务，而 setTimeout 属于宏任务。根据事件循环的规则，微任务会在每次宏任务执行完毕后立即执行，因此 Promise 的回调总是会比 setTimeout 先执行。
  2. 你能想到其他场景下，事件循环会对性能产生影响吗？
    例如，如果你在一个 for 循环中创建了大量的 setTimeout 或 Promise，可能会导致事件循环被大量任务占用，从而影响页面的响应速度。你可以尝试优化这些任务，或者使用 requestIdleCallback 来在浏览器空闲时执行任务。
  3. async/await 是如何与事件循环交互的？
    async/await 实际上是基于 Promise 的语法糖，await 会暂停函数的执行，直到 Promise 解决。await 之后的代码会被放入微任务队列中，在当前宏任务结束后立即执行。因此，async/await 的行为与 Promise 的微任务机制是一致的。
avatar
文章
阅读
粉丝