微任务先于宏任务执行解析

本文深入解析了JavaScript事件循环机制中微任务与宏任务的执行顺序，强调了微任务优先于宏任务执行的关键特性。文章指出，每次事件循环仅执行一个宏任务，随后立即清空所有微任务队列，再进入下一个宏任务周期。这种机制确保了Promise等异步操作的快速响应，从而提升用户体验，避免页面卡顿。同时，文章还列举了setTimeout、Promise回调等常见的微任务和宏任务示例，并提供了在实际开发中如何利用这些特性优化代码、细粒度控制异步操作优先级、避免长时间阻塞主线程等实用技巧，旨在帮助开发者编写更高效、更流畅的Web应用。理解微任务和宏任务的执行机制，是提升前端性能的关键。

JavaScript事件循环中微任务优先于宏任务执行。1. 每次事件循环执行一个宏任务；2. 宏任务执行完毕后，立即清空当前所有微任务；3. 微任务全部执行完后，进入下一个宏任务周期。这确保了Promise等异步操作能快速响应，提升用户体验。

JavaScript的事件循环机制中，微任务和宏任务的执行顺序是这样的：每次事件循环迭代时，JavaScript引擎会从宏任务队列中取出一个宏任务来执行。当这个宏任务执行完毕后，引擎并不会立即去执行下一个宏任务，而是会暂停一下，转而清空并执行所有当前微任务队列中排队的微任务。只有当微任务队列完全清空后，事件循环才会继续，进入下一个宏任务的执行周期。简单来说，就是“一个宏任务，接着清空所有微任务，再下一个宏任务”。

解决方案

要深入理解JavaScript事件循环中微任务和宏任务的执行，我们需要把目光投向浏览器或Node.js环境下的运行时。说实话，刚接触这块的时候，我也有点懵，感觉像是在玩一个复杂的俄罗斯方块游戏，各种任务块得按特定规则落下。但一旦搞明白了，你会发现它精妙且极其重要。

事件循环是JavaScript实现非阻塞I/O的核心机制。它不断地检查是否有任务需要执行。当主线程空闲时，它会从任务队列中取出任务执行。这里的“任务”就分成了两种主要类型：宏任务（Macrotasks）和微任务（Microtasks）。

一个典型的事件循环周期是这样的：

1. 执行当前同步代码：当一个脚本开始执行时，它会从头到尾同步运行，这本身可以看作是一个大的宏任务。
2. 执行一个宏任务：同步代码执行完毕后，事件循环会从宏任务队列（也叫任务队列或回调队列）中取出一个最老的宏任务来执行。
3. 清空微任务队列：在当前宏任务执行完毕后，JavaScript引擎会立即检查微任务队列。此时，所有在当前宏任务执行期间产生的微任务，都会被一个不落地地执行完。
4. 渲染（浏览器特有）：如果浏览器判断有必要，会在执行完所有微任务后进行页面渲染，更新UI。
5. 进入下一个宏任务周期：完成上述步骤后，事件循环会回到第2步，从宏任务队列中取出下一个宏任务执行，如此循环往复。

这个“一个宏任务，然后所有微任务”的模式，是理解异步行为的关键。它意味着微任务具有更高的优先级，它们能够“插队”在下一个宏任务之前执行，这对于需要立即响应的异步操作（比如Promise链式调用）至关重要。

为什么区分微任务和宏任务对前端性能至关重要？

这问题问得好，因为它直接关系到你的页面会不会“卡顿”或者“假死”。想想看，如果你正在刷微博，突然一个大计算卡住了页面，那体验得多糟心？区分微任务和宏任务，就是为了让浏览器能更智能地分配资源，保证用户界面的响应性。

宏任务通常是那些比较“重”的操作，比如用户交互事件（点击、滚动）、网络请求的回调（虽然Promise处理的是微任务，但原始的I/O操作本身可能触发宏任务）、setTimeout或setInterval的回调等等。这些任务的特点是，它们执行时可能会占用主线程较长时间。如果一个宏任务耗时太久，那么在它执行期间，UI是无法更新的，用户会感觉页面“冻结”了。

而微任务则像是那些“轻量级”的、需要立即处理的后续操作。最典型的就是Promise的回调函数（.then(), .catch(), .finally()）。它们的设计初衷，就是为了在当前宏任务执行完毕后，尽快地、不间断地执行，以保证数据流的连贯性。比如，你发起一个网络请求，得到数据后需要立即进行一些处理和状态更新，这些处理如果放在微任务中，就能确保在下次UI渲染或下一个宏任务开始前完成，从而避免UI显示过期数据或出现闪烁。

这种优先级机制，允许开发者在不阻塞主线程太久的前提下，处理复杂的异步逻辑。如果你有多个依赖于前一个异步操作结果的任务，把它们串成Promise链，它们就会在同一个事件循环的“微任务阶段”高效地执行，而不会被其他宏任务或UI渲染打断，这对于构建流畅的用户体验至关重要。当然，这也不是万能药，如果微任务队列里堆积了太多耗时操作，同样会阻塞UI。所以，关键在于平衡。

常见的微任务和宏任务有哪些具体例子？

了解具体例子能帮助我们更好地在代码中识别和利用它们。这就像是了解不同交通工具的特性，才能规划好出行路线。

宏任务（Macrotasks）的典型代表：

• setTimeout() 和 setInterval() 的回调函数：这是最常见的宏任务。它们将回调函数推迟到指定时间后执行，但实际执行时机要看事件循环的调度。即使你设置setTimeout(fn, 0)，它也至少要等到当前所有同步代码和所有微任务执行完毕后，在下一个宏任务周期才可能执行。
• I/O 操作的回调：例如，文件读写（在Node.js环境中更常见）、网络请求的回调（尽管Fetch API和XMLHttpRequest的成功/失败回调本身是Promise，但其内部的I/O完成通知通常会触发一个宏任务，进而解析Promise）。
• 用户交互事件的回调：比如click、keydown、scroll等事件监听器中的回调函数。当用户触发这些事件时，它们的回调会被放入宏任务队列。
• requestAnimationFrame()：这个有点特殊，它通常被认为是浏览器渲染周期前的一个特殊队列，但其行为更接近宏任务，因为它会在下一次浏览器重绘之前执行。
• 初始的脚本执行：当浏览器加载并执行你的JavaScript文件时，整个脚本的执行过程可以看作是一个大的宏任务。

微任务（Microtasks）的典型代表：

• Promise.prototype.then()、.catch()、.finally() 的回调函数：这是微任务家族的绝对主力。当一个Promise状态变为fulfilled或rejected时，其对应的回调函数就会被放入微任务队列。
• queueMicrotask()：这是一个专门用于显式创建微任务的API。如果你需要确保一段代码在当前同步代码执行完毕后、但在下一个宏任务开始前执行，并且不希望引入Promise的额外开销，这个API就很有用。
• MutationObserver 的回调函数：用于监听DOM变化的API。当DOM发生变化时，其回调函数会被放入微任务队列。
• process.nextTick() (Node.js特有)：在Node.js环境中，这个API比微任务队列中的其他任务优先级更高，会在当前操作结束后立即执行，甚至比Promise的回调还要快。不过，在浏览器环境中，我们主要关注前面几种。

理解这些具体例子，能帮助你预测代码的执行顺序，尤其是在处理复杂的异步逻辑时，避免出现意料之外的结果。

如何在实际开发中利用微任务和宏任务的特性优化代码？

在日常开发中，深入理解微任务和宏任务的执行机制，能让你写出更高效、响应更快的代码，也能更好地调试一些看似“玄学”的异步问题。这就像是掌握了交通信号灯的规律，就能更顺畅地通行。

1. 细粒度控制异步操作的优先级： 当你需要在一个操作完成后，立即执行后续逻辑，并且希望这个后续逻辑尽可能快地执行，不被UI渲染或其他耗时操作打断时，优先考虑使用Promise。例如，数据获取后进行数据转换、状态更新等，这些都适合放在Promise的.then()中。这能保证你的数据处理和UI更新逻辑紧密相连，减少视觉上的延迟。

   function fetchDataAndProcess() {
       fetch('/api/data')
           .then(response => response.json())
           .then(data => {
               // 这是微任务：数据处理和状态更新
               console.log('数据已获取并处理:', data);
               // 假设这里需要更新Vue/React组件的状态
               // this.setState({ items: data.items }); 
               // 这里的状态更新通常会在微任务中完成，确保下次渲染前数据是最新的
           })
           .catch(error => {
               console.error('获取数据失败:', error);
           });
       console.log('fetch请求已发送，但数据处理是异步的');
   }
   fetchDataAndProcess();
   console.log('同步代码执行完毕');
   // 输出顺序可能是：
   // fetch请求已发送，但数据处理是异步的
   // 同步代码执行完毕
   // 数据已获取并处理: [...] (在同步代码和所有微任务之后，下一个宏任务之前)

2. 避免长时间阻塞主线程，保持UI响应： 如果你的代码中有一个计算量很大的同步任务，或者需要进行大量DOM操作，直接执行可能会导致页面卡死。这时，你可以利用setTimeout(fn, 0)或requestAnimationFrame将任务拆分成小块，分散到不同的宏任务周期中执行，让浏览器有机会在每次小块任务之间进行UI渲染。

   // 假设一个非常耗时的计算
   function heavyComputation() {
       let result = 0;
       for (let i = 0; i < 1000000000; i++) {
           result += i;
       }
       console.log('耗时计算完成:', result);
   }
   
   // 这样会阻塞UI
   // heavyComputation();
   
   // 优化：使用setTimeout(0)将其推迟到下一个宏任务，让UI有机会渲染
   function optimizedHeavyComputation() {
       let i = 0;
       const total = 1000000000;
       let result = 0;
   
       function processChunk() {
           const chunkSize = 1000000; // 每次处理100万次循环
           let start = i;
           let end = Math.min(i + chunkSize, total);
   
           for (let j = start; j < end; j++) {
               result += j;
           }
           i = end;
   
           if (i < total) {
               console.log(`处理到 ${i}/${total}`);
               setTimeout(processChunk, 0); // 将剩余任务推迟到下一个宏任务
           } else {
               console.log('优化后的耗时计算完成:', result);
           }
       }
       setTimeout(processChunk, 0); // 启动第一个块
   }
   
   console.log('开始执行');
   // heavyComputation(); // 体验差
   optimizedHeavyComputation(); // 体验好，UI不会卡死
   console.log('同步代码继续执行');

3. 批量处理DOM更新： 如果你需要对DOM进行多次修改，例如在一个循环中添加多个元素，每次修改都可能触发浏览器重新计算样式和布局（reflow/repaint），这非常耗性能。你可以将这些DOM操作放在一个微任务或一个requestAnimationFrame中，这样浏览器就有机会将多次修改合并成一次渲染。

   const list = document.getElementById('myList');
   
   // 糟糕的实践：每次循环都可能触发重绘
   // for (let i = 0; i < 100; i++) {
   //     const li = document.createElement('li');
   //     li.textContent = `Item ${i}`;
   //     list.appendChild(li);
   // }
   
   // 优化：将DOM操作放在微任务中，或者先操作内存中的文档碎片，再一次性插入
   // 这里使用Promise作为微任务的例子
   Promise.resolve().then(() => {
       const fragment = document.createDocumentFragment();
       for (let i = 0; i < 100; i++) {
           const li = document.createElement('li');
           li.textContent = `Item ${i} (Optimized)`;
           fragment.appendChild(li);
       }
       list.appendChild(fragment); // 一次性插入DOM
       console.log('DOM更新完成 (微任务中)');
   });
   
   console.log('脚本继续执行');

   或者使用requestAnimationFrame来确保在浏览器下一次绘制前完成所有DOM更新：

   function updateListWithRAF() {
       const fragment = document.createDocumentFragment();
       for (let i = 0; i < 100; i++) {
           const li = document.createElement('li');
           li.textContent = `Item ${i} (RAF Optimized)`;
           fragment.appendChild(li);
       }
       requestAnimationFrame(() => {
           list.appendChild(fragment);
           console.log('DOM更新完成 (requestAnimationFrame)');
       });
   }
   // updateListWithRAF();

4. 理解async/await的执行流：async/await是基于Promise的语法糖，理解了微任务和宏任务，就能更好地预测async/await代码的行为。await关键字会暂停async函数的执行，并将剩余部分作为微任务推入队列，等待被await的Promise解决。

   async function asyncExample() {
       console.log('1. async函数开始');
       await Promise.resolve('Hello'); // 这里的Promise.resolve()会立即解决
       console.log('3. Promise解决后的微任务'); // 这会在当前宏任务执行完毕后，所有微任务中执行
       await new Promise(resolve => setTimeout(() => {
           console.log('4. setTimeout内部');
           resolve('World');
       }, 0)); // setTimeout是宏任务，所以这里的await会等待下一个宏任务周期
       console.log('5. 第二个await后的宏任务');
   }
   
   console.log('0. 同步代码开始');
   asyncExample();
   console.log('2. 同步代码结束');
   
   // 预期的输出顺序：
   // 0. 同步代码开始
   // 1. async函数开始
   // 2. 同步代码结束
   // 3. Promise解决后的微任务
   // 4. setTimeout内部
   // 5. 第二个await后的宏任务

通过这些实践，你会发现对事件循环的理解不再是纸上谈兵，而是能实实在在提升代码质量和用户体验的利器。它要求你对异步代码的执行时机有更精准的把握，从而写出更健壮、更高效的前端应用。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。