JavaScript 中的事件循环与微任务队列的优先级与插队行为

描述
在 JavaScript 的事件循环（Event Loop）中，任务被分为宏任务（Macro Task）和微任务（Micro Task）。理解两者的执行优先级、触发时机以及微任务“插队”行为对编写正确异步代码至关重要。本知识点将深入剖析微任务队列的调度机制，包括在事件循环的哪些阶段会处理微任务，以及微任务队列清空前如何阻断宏任务执行。

知识点详解

1. 基本概念回顾

   • 宏任务：由宿主环境（浏览器/Node）调度，常见来源包括：setTimeout、setInterval、I/O 操作、UI 渲染、postMessage 等。
   • 微任务：由 JavaScript 引擎自身调度，常见来源包括：Promise.then/catch/finally、queueMicrotask、MutationObserver、process.nextTick（Node.js 特有）。
   • 事件循环的每一轮（tick）会执行一个宏任务，然后清空微任务队列。

2. 微任务的优先级与插队行为

   • 当执行栈（Execution Stack）中的同步代码执行完毕后，引擎会立即检查微任务队列，并依次执行所有微任务，直到队列为空。
   • 微任务执行期间新产生的微任务会被添加到当前微任务队列末尾，并在当前周期内继续执行，导致“微任务循环”直到队列清空。
   • 微任务队列清空后，引擎才会考虑渲染（如果必要）并执行下一个宏任务。这意味着微任务可以“插队”在宏任务之间执行，延迟下一个宏任务的开始。

3. 关键执行步骤
   以下是事件循环的简化模型，重点展示微任务处理时机：
   a. 从宏任务队列取出一个任务执行（如 script 整体代码、setTimeout 回调）。
   b. 执行过程中若产生微任务，将其加入微任务队列；产生宏任务则加入宏任务队列。
   c. 当前宏任务执行完毕后，立即执行所有微任务（包括执行微任务过程中新产生的微任务）。
   d. 微任务队列清空后，检查是否需要渲染更新（浏览器环境）。
   e. 进入下一轮事件循环，重复步骤 a。

4. 代码示例与逐步解析

console.log('1. 同步开始');

setTimeout(() => {
  console.log('6. setTimeout 宏任务');
  Promise.resolve().then(() => console.log('7. 微任务（在 setTimeout 内）'));
}, 0);

Promise.resolve()
  .then(() => {
    console.log('3. 微任务 1');
    return Promise.resolve();
  })
  .then(() => {
    console.log('5. 微任务 2（链式）');
  });

queueMicrotask(() => {
  console.log('4. queueMicrotask 微任务');
});

console.log('2. 同步结束');

步骤拆解：

• 步骤 1、2：同步代码执行，输出 1 和 2。
• 步骤 3、4、5：同步代码执行完毕，立即清空微任务队列。
  • 第一个 Promise.resolve().then 回调输出 3，并返回一个新的 Promise.resolve，其 then 回调（输出 5）作为新微任务加入队列末尾。
  • 接着执行 queueMicrotask 回调输出 4。
  • 微任务队列中还有新增的回调（输出 5），继续执行。
• 步骤 6：微任务队列清空后，执行下一个宏任务（setTimeout 回调），输出 6。
• 步骤 7：执行 setTimeout 回调中的微任务，输出 7。

5. 微任务“阻断”渲染与宏任务的影响
   由于微任务在渲染前执行，长时间运行的微任务会阻塞页面渲染和后续宏任务，导致界面“卡顿”。
   示例：

// 点击按钮后，由于微任务循环，渲染被延迟
button.addEventListener('click', () => {
  Promise.resolve().then(() => {
    let i = 0;
    while (i < 1000000) { i++; } // 模拟耗时微任务
  });
  // 即使有 UI 更新，也会等待微任务完成才渲染
  textBox.textContent = '已更新';
});

6. 与 Node.js 事件循环的差异
   在 Node.js 中，事件循环分为多个阶段（如 timers、poll、check 等），微任务在每个阶段结束时执行。Node.js 的 process.nextTick 优先级高于 Promise 微任务，有独立的队列。

7. 最佳实践

   • 避免在微任务中执行耗时操作，以免阻塞渲染和交互。
   • 需确保 DOM 更新后执行逻辑时，可优先使用微任务（如 MutationObserver）以在渲染前处理，但要注意性能。
   • 宏任务适合拆分长任务，允许渲染穿插执行（如用 setTimeout(fn, 0) 将任务分割）。

总结
微任务队列的高优先级和“插队”特性使得异步代码可预测，但也可能导致渲染延迟。掌握微任务在事件循环中的触发时机，能帮助你编写更高效、无阻塞的异步代码，并理解复杂异步流程的执行顺序。在实际开发中，合理分配微任务和宏任务是优化性能的关键。