事件循环如何处理微任务和宏任务

事件循环如何处理微任务和宏任务

javascript 中,微任务和宏任务是事件循环管理的两种类型的异步任务,但它们的处理方式不同。了解它们的工作原理对于预测异步代码的执行顺序至关重要。

1.宏任务队列(任务队列)

  • 宏任务被放入自己的队列中,通常称为任务队列或宏任务队列。
  • 宏任务的示例包括:settimeout、setinterval、i/o 事件 dom 事件(如单击和加载)。
  • 事件循环会从此队列中获取每个宏任务来执行,但前提是微任务队列中的所有微任务都已处理完毕。

2. 微任务队列

  • 微任务有自己的队列,称为微任务队列。
  • 微任务的例子包括:promise 的 .then()、mutationobserver。
  • 微任务队列的优先级高于宏任务队列。每个宏任务执行后,事件循环将处理该队列中的所有微任务,然后再继续执行下一个宏任务。

事件循环如何处理微任务和宏任务:

  1. 事件循环开始新的循环。
  2. 执行调用堆栈中的所有同步代码。
  3. 当调用堆栈为空时
    • 执行微任务队列中的所有微任务。如果一个微任务添加了更多的微任务,它们将在同一个周期内立即执行。
    • 移动到宏任务队列中的第一个宏任务并执行它。
  4. 重复此过程。

示例:

console.log('start');

settimeout(() => {
  console.log('macrotask 1');

  promise.resolve().then(() => {
    console.log('microtask inside macrotask 1');
  });
}, 0);

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

console.log('end');

输出

Start
End
Microtask 1
Microtask 2
Macrotask 1
Macrotask 2

解释:

  1. console.log('start'): 立即执行并打印“start”。
  2. settimeout(..., 0) (macrotask 1): 添加到宏任务队列。
  3. promise.resolve().then(...)(微任务1):添加到微任务队列。
  4. settimeout(..., 0) (宏任务 2):添加到宏任务队列中。
  5. promise.resolve().then(...)(微任务 2):添加到微任务队列。
  6. console.log('end'):立即执行并打印“end”。
  7. 微任务:事件循环将在处理任何宏任务之前处理微任务队列中的所有微任务:
    • 打印“微任务 1”。
    • 打印“微任务 2”。
  8. 宏任务:
    • 执行第一个 settimeout(..., 0)(宏任务 1),打印“macrotask 1”。
    • 执行第二个 settimeout(..., 0)(宏任务 2),打印“macrotask 2”。

概括:

  • 微任务和宏任务被放入两个独立的队列中:微任务队列和宏任务队列。
  • 在事件循环中,微任务队列先于宏任务队列进行处理。
  • 在每个宏任务之后,事件循环会处理微任务队列中的所有微任务,然后再移至宏任务队列中的下一个宏任务。
  • 这确保了微任务(例如 promise 回调)比宏任务具有更高的优先级并且执行得更快。

以上就是事件循环如何处理微任务和宏任务的详细内容,更多请关注其它相关文章!