宏任务和微任务的执行顺序之谜：揭开浏览器的事件循环机制

前端

2024-01-13 11:55:07

浏览器事件循环：揭秘任务队列和宏任务、微任务的微妙世界

一、浏览器事件循环的本质

想象一下一个繁忙的办公室，那里有堆积如山的工作等着处理。在计算机世界的浏览器环境中，这个办公室就是事件循环机制。它负责协调各种任务和事件的执行，以确保浏览器顺利运行。

就像办公室有不同的工作区一样，事件循环机制也有两个关键组件：任务队列和主线程。

任务队列 是等待执行任务的队列，就像堆积在办公桌上待处理的文档。这些任务可以是宏任务，也可以是微任务。

主线程 是执行任务的工人，就像一个勤奋的员工，从任务队列中获取任务并依次处理。

二、宏任务与微任务：谁先执行？

宏任务通常是耗时的任务，例如网络请求、定时器（如setTimeout()）和间隔调用（如setInterval()）。微任务则是轻量级的任务，通常是JavaScript代码，例如Promise.then()和MutationObserver()。

就像办公室里的紧急邮件需要优先处理一样，浏览器也赋予微任务更高的优先级。这意味着微任务会在宏任务之前执行。这是因为微任务通常与UI交互和用户体验密切相关，浏览器希望尽快处理它们以提供更流畅的用户体验。

三、微任务优先执行的秘密

微任务优先执行的原理巧妙而优雅。当主线程执行一个宏任务时，它会先将所有微任务放入任务队列，然后再继续执行宏任务。就像员工先把紧急邮件放在一边，然后继续处理手头的工作。

当宏任务执行完毕，主线程就像一个勤劳的信使，从任务队列中取出所有微任务并依次处理。这意味着微任务总是在宏任务之前执行，即使它们是在宏任务执行期间创建的。

四、嵌套的宏任务和微任务：谁唱主角？

在浏览器事件循环的舞池中，宏任务和微任务可以愉快地共舞，也可以进行嵌套表演。

当宏任务中调用微任务时，微任务会像一位彬彬有礼的舞者，立即进入舞台表演，然后宏任务继续它的表演。

当微任务中调用宏任务时，宏任务会被礼貌地请到队列中等待，就像一位耐心等待轮到的表演者一样。只有在微任务完成表演，主线程才会邀请宏任务上台。

五、面试官的难题：执行顺序大考

面试官经常会抛出一个难题来考察你对宏任务和微任务执行顺序的理解，就像数学家考验学生对微积分的掌握一样。

1. setTimeout()和Promise.then()谁先登台？

Promise.then()会先执行，因为微任务具有更高的优先级。就像一位重要人物优先进入舞厅一样。

2. setTimeout()和MutationObserver()谁更抢眼？

MutationObserver()会先执行，因为它是一个微任务，而setTimeout()是一个宏任务。就像是舞会上有两位舞者，一位是灵活的芭蕾舞者，另一位是沉重的踢踏舞者，芭蕾舞者自然先出风头。

3. setTimeout()和requestAnimationFrame()谁先亮相？

requestAnimationFrame()会先执行，因为它是一个浏览器用来刷新屏幕的特殊功能，具有更高的优先级。就像一位舞台上的明星，有权利优先登场。

结论：事件循环的指挥棒

浏览器事件循环机制就像一位熟练的指挥家，协调着宏任务和微任务的演奏，确保浏览器环境和谐有序地运作。它优先处理微任务，并管理嵌套任务，就像一位精明的导演管理着一场复杂的演出。理解事件循环机制对于掌握JavaScript开发至关重要，它将帮助你编写高效、响应迅速的应用程序，就像一位大师级舞者引领观众进入一个流畅无缝的舞蹈世界。

常见问题解答

1. 如何查看浏览器事件循环？

可以使用以下代码在浏览器控制台中查看事件循环：

while (true) {
  console.log('Main thread running');
  if (requestIdleCallback) {
    requestIdleCallback(() => {
      console.log('Idle callback running');
    });
  } else {
    setTimeout(() => {
      console.log('Timeout running');
    }, 0);
  }
  new Promise(resolve => {
    resolve();
    console.log('Promise then running');
  }).then(() => {
    console.log('Promise then running again');
  });
  console.log('Main thread end');
}