让懵逼的“宏任务”和“微任务”玩转编程

前端

2022-11-28 18:41:54

理解宏任务和微任务：掌控 JavaScript 代码执行

在前端开发的世界里，"宏任务"和"微任务"这两个概念至关重要。它们决定了 JavaScript 代码的执行顺序，进而影响你的程序行为。通过深入了解宏任务和微任务，你可以提升你的编码技能，写出更高效、更健壮的代码。

宏任务和微任务：本质区别

1. 执行时机：

宏任务： 主线程空闲时执行，如脚本、setTimeout、setInterval 和 I/O 操作。
微任务： 宏任务执行完后立即执行，如 Promise.then、async/await 和 MutationObserver。

2. 执行顺序：

宏任务： 先进先出（FIFO），这意味着队列中的第一个宏任务将首先执行。
微任务： 后进先出（LIFO），这意味着队列中最近添加的微任务将首先执行。

3. 优先级： 微任务的优先级高于宏任务，这意味着微任务会在主线程空闲时立即执行，而宏任务则需要等待。

4. 中断机制：

宏任务： 可以通过 clearTimeout() 或 clearInterval() 中断。
微任务： 不能被中断。

微任务与宏任务的执行机制

1. 宏任务

当一个宏任务被添加到事件队列时，它会等待主线程空闲。
当主线程空闲时，它会从事件队列中取出第一个宏任务并执行它。
在宏任务执行期间，主线程被阻塞，这意味着其他宏任务和微任务都无法执行。
当宏任务执行完毕后，主线程会继续执行下一个宏任务。

2. 微任务

当一个微任务被添加到事件队列时，它会等待宏任务执行完毕。
当宏任务执行完毕后，主线程会从事件队列中取出所有微任务并执行它们。
在微任务执行期间，主线程不会被阻塞，这意味着其他宏任务和微任务可以继续执行。
当所有微任务执行完毕后，主线程会继续执行下一个宏任务。

事件循环的实际案例

考虑以下代码示例：

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

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