一文带你彻底掌握前端必问面试题之宏任务和微任务

原创于 2023-06-30 14:11:14 发布 · 743 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了JavaScript中的宏任务和微任务机制，包括它们的执行时机、顺序和嵌套关系。宏任务如script、setTimeout等，在当前执行栈结束后执行；微任务如Promise回调，会在宏任务执行完后立即执行。理解这一机制对编写高效异步代码至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

宏任务和微任务是JavaScript中的两种任务调度机制。

宏任务（macro task）是指由浏览器提供的任务队列中的任务，例如script标签中的代码、setTimeout、setInterval、I/O操作等。宏任务会在当前执行栈执行完毕后执行。

微任务（micro task）是指由JavaScript引擎提供的任务队列中的任务，例如Promise的回调函数、MutationObserver的回调函数等。微任务会在当前宏任务执行完毕后立即执行。
具体区别如下：

执行时机：宏任务在当前执行栈执行完毕后执行，而微任务在当前宏任务执行完毕后立即执行。
执行顺序：宏任务和微任务都有自己的任务队列，宏任务队列中的任务会在微任务队列中的任务执行完毕后执行。
嵌套关系：宏任务可以包含多个微任务，而微任务不会包含其他微任务，它们是平级的。在实际应用中，微任务通常用于处理异步操作的结果，而宏任务用于处理用户交互、渲染等任务。了解宏任务和微任务的区别对于理解JavaScript的事件循环机制和编写高效的异步代码非常重要。

下面是一个代码示例，展示了宏任务和微任务的执行顺序：

console.log('Script Start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('Promise');
});

console.log('Script End');

输出结果为：

Script Start
Script End
Promise
setTimeout

解释执行过程：

1、首先，输出"Script Start"。
2、接着，设置一个宏任务setTimeout，但由于时间设为0，所以会立即放入宏任务队列中。
3、然后，使用Promise.resolve().then()设置一个微任务，会立即放入微任务队列中。
输出"Script End"。
4、当前宏任务执行完毕，开始执行微任务队列中的任务，输出"Promise"。
5、最后，执行宏任务队列中的任务，输出"setTimeout"。
这个示例展示了微任务在当前宏任务执行完毕后立即执行的特点，而宏任务会在所有微任务执行完毕后执行。