宏任务与微任务：一次趣味探索

2023-09-26 23:49:04

什么是宏任务和微任务？

宏任务和微任务都是 JavaScript 任务队列中的任务，它们会在浏览器主线程上执行。宏任务队列是指包含那些需要较长时间才能完成的任务的队列，例如执行脚本代码或执行 setTimeout 和 setInterval 回调函数。微任务队列是指包含那些需要在当前任务完成后立即执行的任务的队列，例如执行 Promise 回调函数或 MutationObserver 回调函数。

宏任务和微任务是如何运行的？

浏览器会轮流从宏任务队列和微任务队列中取出任务并执行。当宏任务队列中没有任务时，浏览器会从微任务队列中取出任务并执行。这意味着微任务始终会在宏任务之前执行。

宏任务和微任务有什么区别？

宏任务和微任务之间最主要的区别是它们的执行顺序。宏任务会在微任务之前执行，除非宏任务本身包含微任务。另一个区别是宏任务通常需要较长时间才能完成，而微任务则通常需要很短的时间才能完成。

宏任务和微任务有什么用？

宏任务和微任务在前端开发中都有广泛的应用。宏任务可以用来执行那些需要较长时间才能完成的任务，例如加载页面资源或执行动画。微任务可以用来执行那些需要在当前任务完成后立即执行的任务，例如更新 UI 或处理用户输入。

如何利用宏任务和微任务优化代码？

理解宏任务和微任务的运行机制可以帮助您优化前端代码。例如，您可以将需要较长时间才能完成的任务放在宏任务队列中，而将需要在当前任务完成后立即执行的任务放在微任务队列中。这样可以避免阻塞浏览器主线程，从而提高网页的性能。

有趣的代码示例

以下是一些有趣的代码示例，可以帮助您理解宏任务和微任务的运行机制：

console.log('宏任务 1');
setTimeout(() => {
  console.log('宏任务 2');
}, 0);
Promise.resolve().then(() => {
  console.log('微任务 1');
});
console.log('宏任务 3');

输出结果：

宏任务 1
宏任务 3
微任务 1
宏任务 2

在这个示例中，宏任务 1 和宏任务 3 是在主线程上执行的，而微任务 1 是在任务队列中执行的。因为微任务会在宏任务之前执行，所以微任务 1 会在宏任务 2 之前执行。

const p = new Promise((resolve, reject) => {
  console.log('Promise');
  resolve();
});

p.then(() => {
  console.log('then');
});

console.log('Global');