赶紧收藏了，解密 JavaScript 中的 Event Loop 机制

赶紧收藏了，解密 JavaScript 中的 Event Loop 机制

JavaScript，这门看似简单却又充满魔性的语言，它的异步非阻塞特性让多少初学者夜不能寐。今天，咱们就来揭开这个谜一样的Event Loop（事件循环）机制的神秘面纱。拿好小本本，准备记录，这可是你在JavaScript江湖中行走的必备法宝。

一切皆为异步？

JavaScript运行在单线程上，这就像是餐厅里只有一个厨师，但顾客却络绎不绝。如果厨师做每道菜都要等前一道菜完全做好才开始，那么餐厅早就关门大吉了。这时候，Event Loop就闪亮登场了，它负责协调这个忙碌的厨师，让他能够有效地处理每一位顾客的订单。

Event Loop的厨房秘诀

Event Loop的厨房里有几个关键的工作台：同步任务在主线程上执行，也就是我们的主厨手中；而异步任务则被分配到任务队列，也就是厨房的待办菜单。

任务队列：你排队，我执行

当JavaScript代码执行异步操作，比如setTimeout，Promise，async/await时，这些操作不会立即执行，而是被放入任务队列中。每当主线程上的同步任务执行完毕，Event Loop就会检查任务队列，看看哪些异步任务准备好要被主厨处理了。

微任务（Microtasks）与宏任务（Macrotasks）

任务队列不止一个，它们分为微任务队列和宏任务队列。宏任务包括：setTimeout，setInterval，setImmediate（Node.js独有），I/O，UI rendering。而微任务则包括：Promise.then，MutationObserver，process.nextTick（Node.js独有）。

Event Loop的工作流程

1. 执行全局脚本中的同步代码
2. 执行微任务
3. 取出一个宏任务执行
4. 执行微任务
5. 重复步骤3和步骤4

咋看之下，这工作流程还挺简单的，不过别急，让我们来看个例子。

console.log('老板，来份宫保鸡丁，快点儿！'); // 同步任务

setTimeout(() => {
  console.log('这份宫保鸡丁怎么还不上？'); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log('服务员，结账！'); // 微任务
});

console.log('小二，这酒怎么还没上？'); // 同步任务

输出顺序是怎样的呢？老规矩，主厨的同步任务先来一份，输出：

老板，来份宫保鸡丁，快点儿！
小二，这酒怎么还没上？

同步任务做完了，来看看微任务，服务员立马结账：

服务员，结账！

最后，主厨才闲下来，看看那份已经等了好久的宫保鸡丁：

这份宫保鸡丁怎么还不上？

Event Loop的细节陷阱

Event Loop的机制看似简单，实则隐藏着不少陷阱。比如，微任务的执行速度通常会比宏任务快。因此，即使宏任务设置的是setTimeout(() => {}, 0)，它也不可能立即执行，因为微任务总是先得到满足。这就像是，即便你点了个快餐，如果有人插队（微任务），你还是得等。

还有，别忘了requestAnimationFrame（rAF），这个家伙是专门用来做动画的，它的执行时机通常是在宏任务执行完，下一次重绘之前。

大结局：Event Loop的生活智慧

Event Loop的故事讲完了，它其实就像是生活中的一个智慧：一边要处理眼前的事，一边还得规划未来的事。在JavaScript的世界里，Event Loop保证了这门语言的异步特性和非阻塞运行，让整个程序就像一个精密运作的厨房，尽管只有一个主厨，但每桌的菜肴还是能够适时地上桌。

好了，今天的解密就到这里。如果你对Event Loop还有什么疑问，或者想要了解更多JavaScript的秘密，别忘了关注我，我们下回见！

算法面试宝典小程序

算法面试宝典小程序是我开发的一款小程序，希望大家喜欢

提供了字节等大厂面试题库，涵盖7种编程语言的Top5答案，配有详细题解报告和视频讲解。无论您是准备面试还是想提升编程能力，都能轻松掌握各种算法题型，从容面对挑战！

欢迎加入wx前端技术交流群,二维码长期有效

在这里，我们分享技术经验、职位机会、面试总结，甚至人生感悟。无论您是前端开发新手还是资深工程师，这里都有丰富的资源和热情的交流氛围等待着您。加入我们，与同行们一起探讨前端技术发展趋势，共同成长，共享精彩！

入我们，与同行们一起探讨前端技术发展趋势，共同成长，共享精彩！

[外链图片转存中…(img-xubjwMfe-1710773574430)]