微任务队列无限执行顺序详解

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《微任务队列无长度限制，按顺序执行到底》，涉及到，有需要的可以收藏一下

JavaScript中的微任务队列没有明确的长度限制，它是一个动态增长的FIFO队列，与当前宏任务的生命周期绑定；1.微任务队列在规范层面无固定上限，理论上可无限增长；2.微任务优先级高于宏任务，在当前宏任务执行后立即清空微任务队列；3.若微任务无限生成，会持续占用主线程，导致页面冻结、宏任务无法执行；4.常见微任务包括Promise回调、MutationObserver、queueMicrotask()；5.避免微任务过度膨胀的方法包括避免递归创建微任务、分解大型任务、使用setTimeout调度、利用性能工具分析瓶颈。

JavaScript中的微任务队列在ECMAScript规范层面，并没有一个明确的、硬性的“长度限制”。它更像是一个会不断增长的列表，等待事件循环的下一个tick来清空。当主线程执行完当前宏任务后，会立即检查并执行所有排队的微任务，直到队列为空。

解决方案

谈到微任务队列，我心里总有个疑问：这玩意儿，它究竟有没有个头？从规范的角度看，答案是“没有”。它不像某些固定大小的缓冲区，一旦满了就溢出。微任务队列的本质是一个先进先出的（FIFO）队列，其生命周期与当前的宏任务紧密关联。每次事件循环从宏任务队列中取出一个任务执行时，执行完毕后，它会“顺便”把微任务队列里所有的任务都处理掉，一个不留，直到清空。所以，它的“长度”是动态变化的，理论上可以无限增长，只要有新的微任务不断被添加到队列中。

但话说回来，没有理论上的限制，不代表实际使用中就没有问题。如果微任务被无限地、或者以极快的速度生成，而没有机会让事件循环进入下一个宏任务阶段，那么它就会持续占用主线程，导致一系列性能问题。这更像是一种资源耗尽的问题，而不是一个固定容量的限制。

微任务队列与宏任务队列的区别是什么？

我记得刚开始学JS的时候，对这个“队列”的概念总是有点模糊，总觉得是不是有个上限，不然岂不是要炸？其实，理解微任务和宏任务的区别，是理解事件循环的关键。

宏任务（Macrotask）是那些由宿主环境（比如浏览器或Node.js）发起的任务，例如setTimeout、setInterval、I/O操作、UI渲染事件（如点击、加载）等。每次事件循环迭代，只会从宏任务队列中取出一个任务来执行。

而微任务（Microtask）则是在当前宏任务执行结束后、下一个宏任务开始之前执行的任务。它们优先级更高，会“插队”在当前宏任务之后立即执行。常见的微任务包括Promise的回调（then(), catch(), finally()）、MutationObserver的回调、queueMicrotask()等。

你可以这样理解：当一个宏任务执行完毕后，JavaScript引擎会先去看看有没有微任务在排队。如果有，就全部拉出来执行完；执行完了，再去看下一个宏任务。这种机制导致了一个现象：如果微任务队列里任务太多，它会“霸占”CPU，导致页面长时间无响应，因为UI渲染和下一个宏任务都被推迟了。

无限循环的微任务会如何影响页面性能？

虽然微任务队列没有长度限制，但如果你的代码不小心创建了一个无限循环的微任务，那对页面性能的影响绝对是灾难性的。想象一下，如果你的主线程被一个永无止境的微任务队列霸占了，会发生什么？

首先，UI会完全冻结。因为JavaScript是单线程的，UI渲染和用户交互事件（点击、滚动等）都与JS执行在同一个线程上。如果微任务一直在执行，渲染引擎根本没有机会进行重绘或回流，用户界面会变得毫无响应。

其次，其他宏任务会被“饿死”。比如你设置了一个setTimeout，或者有网络请求的回调，它们都属于宏任务。如果微任务队列一直不空，事件循环就无法进入下一个宏任务的阶段，这些宏任务就永远得不到执行。

看个简单的例子：

// 这是一个危险的、会导致页面卡死的代码片段
function createInfiniteMicrotask() {
  Promise.resolve().then(() => {
    console.log("执行微任务...");
    createInfiniteMicrotask(); // 递归调用，不断创建新的微任务
  });
}

// 尝试执行，你会发现页面会卡死，控制台会持续输出“执行微任务...”
// createInfiniteMicrotask();

// 模拟一个宏任务，它永远不会被执行到
setTimeout(() => {
  console.log("这个宏任务永远不会被执行！");
}, 0);

console.log("脚本开始执行");
// 实际应用中，你需要小心避免这种无限递归的微任务创建。

这段代码会不断地创建新的Promise微任务，导致事件循环永远无法清空微任务队列，进而无法处理后续的宏任务或进行UI更新。

如何避免微任务队列的过度膨胀？

既然理论上没有限制，而实践中又可能导致性能问题，那么如何避免微任务队列的过度膨胀，就显得尤为重要了。这更多是一种编程习惯和架构设计上的考量。

1. 谨慎使用Promise.resolve().then()进行任务调度：虽然它是一个快速将任务推入微任务队列的方法，但如果被滥用，尤其是在循环或递归中，很容易造成队列堆积。如果你的任务不需要立即在当前宏任务结束后执行，或者可以稍微延迟，考虑使用setTimeout(..., 0)将其推迟到下一个宏任务周期。

2. 分解大型计算任务：如果你的代码需要执行大量计算，不要一次性全部放在一个微任务中。尝试将它们分解成小块，并使用setTimeout或requestAnimationFrame（如果与UI相关）来调度这些小块，这样可以在每个小块之间给浏览器喘息的机会，进行渲染和处理用户输入。

   // 避免一次性计算
   function processLargeArrayBad(arr) {
     Promise.resolve().then(() => {
       // 大量耗时计算
       arr.forEach(item => { /* ... */ });
       console.log("计算完成");
     });
   }
   
   // 分解计算任务
   function processLargeArrayGood(arr) {
     let index = 0;
     const chunkSize = 1000; // 每次处理1000个
     function processChunk() {
       const start = index;
       const end = Math.min(index + chunkSize, arr.length);
       for (let i = start; i < end; i++) {
         // 模拟耗时操作
         // console.log(`处理 ${arr[i]}`);
       }
       index = end;
   
       if (index < arr.length) {
         // 使用 setTimeout 调度下一个块，给浏览器渲染和处理事件的机会
         setTimeout(processChunk, 0);
       } else {
         console.log("所有计算完成");
       }
     }
     processChunk();
   }
   
   // 示例：
   // const largeArray = Array.from({ length: 100000 }, (_, i) => i);
   // processLargeArrayBad(largeArray); // 可能会卡顿
   // processLargeArrayGood(largeArray); // 体验更好

3. 理解异步流控制：在处理复杂的异步逻辑时，清晰地规划你的Promise链或async/await结构。确保不会无意中创建无限递归的异步操作，尤其是在事件监听器或数据流处理中。

4. 利用浏览器开发者工具：Chrome等浏览器的开发者工具提供了强大的性能分析功能。你可以通过Performance面板记录运行时表现，查看主线程的活动，识别长时间运行的微任务，从而定位并优化代码中的性能瓶颈。

总的来说，微任务队列的“无限制”更多是理论上的概念，实际开发中我们需要像对待有限资源一样去管理它，避免因为过度使用而导致性能问题。

好了，本文到此结束，带大家了解了《微任务队列无限执行顺序详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！