事件循环任务优先级解析

从现在开始，我们要努力学习啦！今天我给大家带来《事件循环任务优先级详解》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

微任务在当前宏任务结束后立即执行并清空，2. 宏任务按队列顺序每次执行一个，3. 微任务优先级“高”体现在插队机制，确保Promise等异步操作更快响应，4. 理解该机制可优化性能、避免卡顿、保证异步顺序、批处理DOM更新，最终提升代码质量与用户体验。

事件循环中的“任务优先级”并非我们传统意义上那种“这个比那个数字更大所以先执行”的优先级，它更像是一种执行顺序和类别划分。说白了，它定义了不同类型的异步任务在事件循环的每一次“转动”中，谁能先得到CPU的青睐。核心在于微任务（Microtasks）会在当前宏任务（Macrotasks）执行完毕后、下一个宏任务开始前，被全部清空并执行。

解决方案

理解事件循环中的“任务优先级”，关键在于区分两大类任务：宏任务（Macrotasks）和微任务（Microtasks）。每次事件循环的迭代，浏览器或Node.js环境会从宏任务队列中取出一个任务来执行。这个宏任务执行完毕后，它不会立刻去执行下一个宏任务，而是会暂停一下，转而检查并清空所有当前已排队的微任务。只有当微任务队列被完全清空后，事件循环才会继续从宏任务队列中取出下一个宏任务进行处理。

这就像一个厨师（事件循环）在做菜（宏任务）：他炒完一道菜，不是立刻去炒下一道，而是会先把所有已经准备好的配菜（微任务）都切好、洗净、摆盘。只有所有配菜都处理完了，他才会开始炒下一道主菜。这种机制确保了微任务能够更快地响应，因为它被“插队”到了当前宏任务和下一个宏任务之间。

常见的宏任务包括：主脚本执行、setTimeout、setInterval、I/O操作、UI渲染、requestAnimationFrame等。 常见的微任务包括：Promise的回调（then/catch/finally）、MutationObserver的回调、queueMicrotask。

所以，当我说“优先级”时，我指的其实是微任务在执行时机上的“插队”优势，它保证了对某些异步操作的即时响应性。

微任务和宏任务究竟有何不同，它们是如何影响代码执行顺序的？

在我看来，微任务和宏任务最大的不同，在于它们在事件循环中的“生命周期”和“清算时机”。宏任务是事件循环的“大回合”，每次事件循环迭代，只会执行一个宏任务。而微任务则是“小回合”或说“插曲”，它们会在每个宏任务执行完毕后，作为其“收尾工作”被一次性全部处理掉。

举个例子，你写了一段同步代码，它本身就是一个宏任务。这段代码执行过程中，如果创建了Promise，并且Promise状态变为resolved/rejected，那么它的.then()或.catch()回调就会被推入微任务队列。同时，你可能还设置了一个setTimeout，它的回调会被推入宏任务队列。

代码执行顺序会是这样：

1. 执行当前宏任务（即你的同步代码）。
2. 当同步代码执行完毕，检查微任务队列。 如果有Promise回调或其他微任务，它们会立刻被执行，直到微任务队列清空。
3. 微任务清空后，当前宏任务才算真正结束。
4. 事件循环从宏任务队列中取出下一个宏任务（比如setTimeout的回调）执行。

这种机制导致了一些有趣的现象。比如，你可能会发现一个Promise.resolve().then()的回调，会比一个setTimeout(..., 0)的回调更早执行，尽管它们都被认为是异步的。这是因为Promise回调是微任务，而setTimeout是宏任务。

console.log('Start'); // 宏任务1 - 同步代码

Promise.resolve().then(() => {
  console.log('Promise Microtask'); // 微任务1
});

setTimeout(() => {
  console.log('Timeout Macrotask'); // 宏任务2
}, 0);

console.log('End'); // 宏任务1 - 同步代码

// 实际输出顺序：
// Start
// End
// Promise Microtask
// Timeout Macrotask

这个例子清晰地展示了微任务的“插队”能力。Promise Microtask在Timeout Macrotask之前执行，尽管两者都设定为“尽快执行”，但微任务的清空机制赋予了它更高的“优先级”。

为什么理解任务优先级对前端性能优化和异步编程至关重要？

理解任务优先级，在我看来，是掌握前端性能优化和编写健壮异步代码的基石。如果你不明白这个机制，很多看似简单的异步问题都会变得难以捉摸，甚至导致性能瓶颈或难以调试的bug。

首先，它直接影响用户界面的响应性。 想象一下，你有一个很重的计算任务需要执行。如果你把它放在一个同步代码块中，或者在一个长时间运行的微任务中，那么在它执行期间，UI更新（这也是一个宏任务）就会被完全阻塞。用户会感觉页面卡顿、无响应。但如果你能巧妙地将这个重任务拆分成多个小块，并用setTimeout（宏任务）来调度它们，或者利用requestAnimationFrame，那么每个小块之间，浏览器就有机会进行UI渲染，从而保持界面的流畅。

其次，它决定了异步操作的确定性。 在复杂的异步流程中，我们经常会遇到多个异步事件同时发生的情况。比如，一个网络请求回来后，既要更新UI，又要触发另一个数据处理。如果你不清楚Promise回调（微任务）和setTimeout（宏任务）的执行顺序，你可能会写出竞态条件（race condition）的代码，导致数据不一致或逻辑错误。明确了微任务在当前宏任务结束后立即执行的特性，你就能更准确地预测代码的执行路径。

再者，它关系到资源管理和批处理。 比如，你在短时间内需要对DOM进行多次修改。如果每次修改都触发一次DOM重绘/回流，性能会很差。利用微任务的特性，你可以将这些DOM操作放在一个Promise回调或queueMicrotask中，这样它们会在当前宏任务结束时一次性执行，浏览器有机会将多次修改合并成一次重绘/回流，大大提升性能。这其实就是很多前端框架（比如Vue的nextTick）内部优化DOM更新的原理之一。

所以，这不仅仅是理论知识，更是我们日常开发中避免“坑”和提升代码质量的实用工具。

在实际开发中，我们如何利用事件循环的任务机制来优化代码？

在实际开发中，我们可以利用事件循环的任务机制，来精细地控制代码执行时机，从而实现性能优化和更可靠的异步逻辑。这不仅仅是避免问题，更是主动设计。

1. 拆分长时间运行的计算任务： 如果有一个计算密集型任务，它可能会导致页面卡顿。不要把它全部放在一个函数里同步执行。可以考虑使用setTimeout(taskPart, 0)将其拆分成多个小块，每次执行一小部分，然后将剩余部分推入宏任务队列。这样，在每个小块之间，事件循环有机会处理其他宏任务，包括UI渲染，从而避免页面卡死。

function heavyComputation() {
  let i = 0;
  const total = 1000000000;

  function processChunk() {
    const chunkEnd = Math.min(i + 1000000, total);
    for (; i < chunkEnd; i++) {
      // 模拟计算
    }

    if (i < total) {
      // 还有剩余，推入下一个宏任务
      setTimeout(processChunk, 0);
    } else {
      console.log('Computation finished!');
    }
  }
  processChunk();
}

// 这样调用不会阻塞UI
heavyComputation();

2. 批处理DOM操作： 频繁地修改DOM会导致浏览器反复进行布局计算（reflow）和重绘（repaint），非常耗性能。通过将多个DOM操作放在一个微任务中，可以确保它们在当前宏任务结束时一次性执行，浏览器有机会将这些操作合并，只进行一次或少数几次布局和重绘。

const ul = document.getElementById('myList');
let count = 0;

function addItemsOptimized() {
  // 使用Promise.resolve().then()来创建一个微任务
  Promise.resolve().then(() => {
    console.log('Batching DOM updates...');
    for (let i = 0; i < 100; i++) {
      const li = document.createElement('li');
      li.textContent = `Item ${count++}`;
      ul.appendChild(li);
    }
    console.log('DOM updates applied in one go.');
  });
}

// 假设我们多次调用 addItemsOptimized
// 所有的DOM操作都会在同一个微任务中被执行，减少回流/重绘
addItemsOptimized();
addItemsOptimized();

这里的Promise.resolve().then()或者queueMicrotask（如果环境支持）都是很好的选择。

3. 确保异步操作的顺序性： 当你需要确保某个操作在所有当前已排队的异步操作（尤其是Promise链）完成后再执行时，可以利用setTimeout(..., 0)。因为setTimeout的回调是宏任务，它会在所有当前微任务执行完毕后才被调度。

// 假设这里有很多Promise链在进行
Promise.resolve().then(() => console.log('Promise 1'));
Promise.resolve().then(() => console.log('Promise 2'));

// 这个setTimeout会在所有Promise回调之后执行
setTimeout(() => {
  console.log('This runs after all current microtasks.');
}, 0);

console.log('Synchronous code continues...');

通过这些实践，我们能够更好地驾驭JavaScript的异步特性，编写出既高效又健壮的前端应用。关键在于，我们要把事件循环看作一个精密的调度系统，而不是一个简单的“队列”。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~