微任务在当前宏任务结束后立即执行并清空，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，它的回调会被推入宏任务队列。
代码执行顺序会是这样：
- 执行当前宏任务（即你的同步代码）。
- 当同步代码执行完毕，检查微任务队列。 如果有Promise回调或其他微任务，它们会立刻被执行，直到微任务队列清空。
- 微任务清空后，当前宏任务才算真正结束。
- 事件循环从宏任务队列中取出下一个宏任务（比如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的异步特性，编写出既高效又健壮的前端应用。关键在于，我们要把事件循环看作一个精密的调度系统，而不是一个简单的“队列”。
