2022年了，我们都了解JavaScript的宏任务和微任务吗？

引子

2022年，JavaScript作为网络开发的基石，已经走过了25个年头。随着前端技术的蓬勃发展，JavaScript的应用场景愈发广泛，从简单的页面交互到复杂的单页面应用，无处不在。

在JavaScript的执行机制中，宏任务和微任务是两个至关重要的概念。理解这两个概念，对于掌握JavaScript的异步执行原理至关重要。

宏任务和微任务

宏任务

• 由JavaScript引擎创建的事件，如setTimeout、setInterval、脚本执行等。
• 排队在宏任务队列中。
• 只有当调用栈中的所有任务都执行完毕后，才会执行宏任务队列中的任务。

微任务

• 由事件循环（Event Loop）创建的事件，如Promise.then、MutationObserver等。
• 排队在微任务队列中。
• 在宏任务执行前，会先执行微任务队列中的任务。

Event Loop

JavaScript引擎使用一个称为Event Loop的机制来管理任务队列。Event Loop会持续检查宏任务队列和微任务队列，并依次执行其中的任务。

执行流程

1. 执行调用栈中的同步任务。
2. 将宏任务推入宏任务队列。
3. 如果调用栈为空，则执行微任务队列中的任务。
4. 将新的宏任务推入宏任务队列。
5. 重复步骤2-4，直到宏任务队列为空。

理解宏任务和微任务的意义

理解宏任务和微任务对于解决JavaScript中的异步问题至关重要。例如：

• Promise ：是一个微任务，可在异步任务完成后执行。
• setTimeout ：是一个宏任务，将在指定的时间间隔后执行。

知道这些区别，我们可以编写出高效且易于维护的JavaScript代码。

实战案例

以下代码示例演示了宏任务和微任务的执行顺序：

console.log('同步1');

setTimeout(() => {
  console.log('宏任务1');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务1');
});

console.log('同步2');

输出结果：

同步1
同步2
微任务1
宏任务1

这个示例说明了：

• 同步任务先执行（同步1、同步2）。
• 微任务在宏任务之前执行（微任务1）。
• setTimeout是一个宏任务，因此在所有微任务执行完成后才执行（宏任务1）。

总结

宏任务和微任务是JavaScript异步执行机制的核心概念。了解这两个概念，对于编写高效、健壮的JavaScript代码至关重要。通过Event Loop，JavaScript引擎可以协调任务执行，从而为我们提供了一个强大的异步编程模型。