事件循环揭秘：剖析任务执行秩序的幕后逻辑

2023-04-24 15:42:27

揭秘前端世界背后的指挥官：事件循环和任务执行顺序

事件循环：前端开发的幕后英雄

在纷繁复杂的代码王国里，事件循环如同一位默默无闻的指挥官，协调着各个任务的有条不紊地执行。它负责安排任务的执行次序，确保浏览器在用户交互和系统事件面前游刃有余。今天，我们就来掀开事件循环的神秘面纱，探索任务执行顺序背后的逻辑，帮助你成为前端世界的掌控者。

任务队列：任务执行的候车室

任务队列就像一个候车室，各种任务在此耐心等待着执行。队列遵循先进先出（FIFO）的原则，即先加入的任务先获得执行机会。事件循环会不断巡视任务队列，一旦发现有任务等待，便将其取出并安排执行。

宏任务与微任务：任务执行的两大阵营

在事件循环的世界里，任务被划分为两大阵营：宏任务和微任务。

宏任务： 包括脚本、setTimeout、setInterval等，属于比较“笨重”的任务，需要等待当前执行的任务完成后才能执行。
微任务： 包括Promise.then、MutationObserver、process.nextTick等，属于“轻盈敏捷”的任务，会在当前执行的任务结束后立即执行。

任务执行的次序

宏任务和微任务的执行次序有着明确的分工：

主线程中的同步任务率先执行。
同步任务结束后，执行主线程中的宏任务。
宏任务结束后，执行主线程中的微任务。
事件循环循环往复，直到任务队列中再无任务。

典型案例：任务执行顺序的奥秘

为了深入理解任务执行顺序，让我们用几个典型案例来揭秘其背后的奥秘：

案例1：同步任务与异步任务

console.log('同步任务1');
setTimeout(() => {
  console.log('异步任务1');
}, 0);
console.log('同步任务2');

结果：

同步任务1和同步任务2立即执行，异步任务1稍后执行。原因在于异步任务1被放入任务队列，等待事件循环的调度。

案例2：宏任务与微任务

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

结果：

宏任务1和宏任务2立即执行，微任务1在宏任务1执行结束后立即执行。这是因为微任务会优先于宏任务执行。

案例3：宏任务与微任务的嵌套

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