深入解析宏任务与微任务

前端

2024-01-25 10:41:45

JavaScript 中，异步任务通常可以分为宏任务和微任务。

宏任务包括：

脚本执行
setTimeout 和 setInterval
setImmediate

微任务包括：

Promise.then
process.nextTick (Node.js)
MutationObserver

宏任务和微任务都会被添加到事件循环队列中，然后按顺序执行。

宏任务和微任务的执行顺序

事件循环队列的执行顺序是：

首先执行所有同步任务
然后执行所有宏任务
最后执行所有微任务

如果一个微任务在宏任务执行过程中被添加到队列中，那么它将在本轮事件循环中，宏任务执行完后被执行。

宏任务和微任务的优先级

微任务的优先级高于宏任务。这意味着，如果一个微任务和一个宏任务同时被添加到事件循环队列中，那么微任务将先被执行。

宏任务和微任务的应用场景

宏任务通常用于执行一些耗时的操作，例如：

发起网络请求
setTimeout 和 setInterval
setImmediate

微任务通常用于执行一些轻量级的操作，例如：

更新UI
处理用户输入
触发事件

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

对于一些需要立即执行的任务，可以使用微任务。这可以减少任务的延迟，从而提高代码的性能。
对于一些耗时的任务，可以使用宏任务。这可以避免阻塞主线程，从而提高代码的响应速度。
在事件循环中，微任务的优先级高于宏任务。因此，如果在一个宏任务中需要执行一个微任务，可以将微任务添加到事件循环队列中，然后在宏任务执行完后立即执行。这可以避免宏任务阻塞微任务的执行，从而提高代码的性能。

宏任务和微任务的示例

示例 1

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

console.log('1');

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

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

console.log('4');

执行结果为：

在上面的代码中，console.log('1')和console.log('4')是同步任务，setTimeout是宏任务，Promise.resolve().then()是微任务。

事件循环首先执行同步任务，因此console.log('1')和console.log('4')先被执行。

然后，事件循环执行宏任务，因此setTimeout被执行，console.log('2')被输出。

最后，事件循环执行微任务，因此Promise.resolve().then()被执行，console.log('3')被输出。

示例 2

以下代码演示了如何利用宏任务和微任务优化代码性能。

const input = document.getElementById('input');

input.addEventListener('input', (e) => {
  // 将任务添加到事件循环队列中
  Promise.resolve().then(() => {
    // 更新UI
    document.getElementById('output').innerHTML = e.target.value;
  });
});