javaScript中的宏任务和微任务

前言 

 在 JavaScript 中，宏任务（macro task）和微任务（micro task）是关于异步代码执行的两个重要概念。

 宏任务是指由 JavaScript 引擎底层提供的任务队列中的任务。它们的执行顺序是基于事件循环（event loop）机制的。典型的宏任务包括：

•  setTimeout 和 setInterval 回调函数
•  I/O 操作（例如读取文件、发送网络请求）
•  DOM 渲染

微任务是一种高优先级的任务，其执行时机会在宏任务队列之前。微任务通常是由 Promise 的状态变化触发的回调函数。典型的微任务包括：

•  Promise 的 then 方法
•  MutationObserver 回调函数
•  queueMicrotask 函数

demo

以下是一个简单的示例，演示宏任务和微任务的执行顺序：

console.log('Start');

setTimeout(() => {
    console.log('Timeout');
}, 0);

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

console.log('End');

// 输出结果的顺序为: Start --> End --> Promise --> Timeout

首先，我们输出 'Start' 和 'End'，它们是同步代码执行的结果。然后，setTimeout 函数被添加到宏任务队列中，而 Promise 的回调函数被添加到微任务队列中。由于微任务的优先级更高，所以在宏任务执行之前，将先执行微任务。因此，我们首先输出 'Promise'，然后再输出 'Timeout'。

Good Luck !