JavaScript 微任务的全面解析

微任务（Microtasks）是 JavaScript 中用于处理异步任务的一种机制，主要用于在事件循环的当前任务执行完毕后、下一个任务开始之前执行。微任务的引入是为了解决某些高优先级任务的执行需求，确保它们能够在当前任务结束后立即执行，而不需要等待整个事件循环的下一个周期。

微任务的特点

1. 高优先级：微任务在当前任务执行完毕后立即执行，优先级高于宏任务（如 setTimeout、setInterval 等）。
2. 执行时机：微任务会在当前调用栈清空后、下一个宏任务开始之前执行。
3. 常见场景：Promise 的回调、MutationObserver、queueMicrotask 等都是微任务的典型应用。

微任务的引入背景

在早期的 JavaScript 中，异步任务主要通过宏任务（如 setTimeout、setInterval）来处理。然而，宏任务的执行时机是在事件循环的下一个周期，这导致某些高优先级的任务无法及时执行。例如：

• Promise 的异步回调：Promise 的 then 和 catch 回调需要尽快执行，以确保异步操作的及时响应。
• DOM 更新：MutationObserver 需要监听 DOM 的变化并立即执行回调。

为了解决这些问题，微任务机制被引入，使得这些高优先级的任务能够在当前任务结束后立即执行。

微任务的执行机制

1. 事件循环中的微任务队列：

   • 每个事件循环都有一个微任务队列。
   • 当调用栈清空后，事件循环会检查微任务队列，依次执行其中的任务。
   • 如果在执行微任务的过程中又产生了新的微任务，这些新的微任务也会被添加到队列中，并在当前周期内执行。

2. 微任务与宏任务的对比：

   • 宏任务：包括 setTimeout、setInterval、requestAnimationFrame、I/O 操作等，它们的回调会在事件循环的下一个周期执行。
   • 微任务：包括 Promise 回调、queueMicrotask、MutationObserver 等，它们的回调会在当前任务结束后立即执行。

微任务的典型应用

1. Promise：

   • Promise 的 then、catch 和 finally 回调都是微任务。
   • 例如：

     Promise.resolve().then(() => console.log('Microtask 1'));
     console.log('Sync task');
     // 输出顺序：Sync task -> Microtask 1
     

2. queueMicrotask：

   • queueMicrotask 是浏览器提供的 API，用于显式地将一个任务添加到微任务队列。
   • 例如：

     queueMicrotask(() => console.log('Microtask 2'));
     console.log('Sync task');
     // 输出顺序：Sync task -> Microtask 2
     

3. MutationObserver：

   • MutationObserver 用于监听 DOM 变化，其回调也是微任务。
   • 例如：

     const observer = new MutationObserver(() => console.log('DOM changed'));
     observer.observe(document.body, { childList: true });
     document.body.appendChild(document.createElement('div'));
     console.log('Sync task');
     // 输出顺序：Sync task -> DOM changed
     

微任务的最佳实践

1. 避免微任务嵌套过深：

   • 如果在微任务中频繁添加新的微任务，可能会导致微任务队列过长，阻塞事件循环。
   • 例如：

     function recursiveMicrotask() {
         queueMicrotask(() => {
             console.log('Microtask');
             recursiveMicrotask(); // 无限递归
         });
     }
     recursiveMicrotask();
     

2. 合理使用微任务和宏任务：

   • 对于高优先级的任务（如 Promise 回调），使用微任务。
   • 对于低优先级的任务（如定时器回调），使用宏任务。

3. 注意执行顺序：

   • 微任务总是在当前任务结束后立即执行，而宏任务需要等待下一个事件循环周期。
   • 例如：

     setTimeout(() => console.log('Macrotask'), 0);
     Promise.resolve().then(() => console.log('Microtask'));
     console.log('Sync task');
     // 输出顺序：Sync task -> Microtask -> Macrotask
     

总结

微任务的引入是为了解决高优先级任务的及时执行问题，确保它们能够在当前任务结束后立即执行。通过合理使用微任务和宏任务，可以优化 JavaScript 的异步编程模型，提升应用的性能和响应速度。