【THE LAST TIME】彻底吃透 JavaScript 执行机制
最新回答
浅夏时光
2026-10-23 07:47:38
【前端资料领取】点赞关注+私信学习
执行 & 运行
首先我们需要明白，JavaScript 的执行与运行是两个不同概念。执行，依赖于环境如 Node.js、浏览器或 Ringo，不同环境下执行机制各有差异。而我们讨论的 Event Loop 是一种执行方式，之后会提到 Node.js 的执行方式。运行则是指 JavaScript 解析引擎，是统一的概念。
关于 JavaScript
本文中，只需记住一句话：JavaScript 是单线程语言，无论是 HTML5 中的 Web-Worker 还是 Node.js 中的 cluster 都是表面现象，且 cluster 与进程管理相关。注意区分进程与线程。
既然 JavaScript 是单线程语言，所有代码必须按顺序执行，就像食堂排队打饭，必须一个接一个来，那些还未排队的就得等待。
概念梳理
在深入探讨执行机制前，先梳理一些基本概念，以备后续解释时心中有数。
事件循环(Event Loop)
什么是 Event Loop？其实这个概念有些模糊，需要结合运行机制来解释。
JavaScript 有一个主线程和调用栈，所有任务都在调用栈中等待主线程执行。暂且理解为 Event Loop 始终在循环，寻找队列中的可执行任务。
任务队列(task queue)
任务即 task，每条语句就是一个任务。队列遵循先进先出（FIFO）原则，因此，Task Queue 承载任务，Event Loop 不断寻找可执行任务。
同步任务(SyncTask)、异步任务(AsyncTask)
同步任务在执行时立即执行，比如代码直接在控制台打印结果。而异步任务需要等待其他任务完成后才执行，类似排队时等待前面的人完成才能轮到自己。
异步任务会在事件循环中注册回调，如 setTimeout，主线程先执行其他任务，当等待时间到时，执行回调。
小试牛刀
宏任务(MacroTask)、微任务(MicroTask)
任务分为同步与异步，进一步分为宏任务与微任务。宏任务包括所有同步任务、setTimeout、setInterval、I/O、UI渲染等。微任务包括 Promise.then、catch、finally（注意，不是所有 Promise）以及 MutationObserver。
浏览器环境下的 Event Loop
梳理完任务分类，接下来分析 JavaScript 的执行机制。理解了宏任务与微任务的区别后，可以更清晰地了解 Event Loop。
setTimeout、setInterval
setTimeout 是指等待一定时间后执行回调函数，setInterval 是指每隔一定时间重复执行回调。例如 setTimeout 实现延迟执行，但实际执行延迟效果取决于事件循环。
Promise
Promise.then、catch、finally 属于微任务，用于处理异步操作。通过结合前面的解释，理解异步操作在事件循环中的位置。
Node 环境下的 Event Loop
Node.js 的执行机制基于 libuv 实现，使用异步事件驱动编程。libuv 提供了 I/O 事件循环和异步回调，如时间、非阻塞网络、异步文件操作、子进程等。
Event Loop 分为 6 个阶段，从 timers 到 close callbacks，每个阶段都有特定功能。例如 timers 阶段执行定时器回调，pending callbacks 阶段处理 I/O 回调。
最终
通过本文，我们对 JavaScript 的执行机制有了更深入的理解。从概念梳理到具体解释，一步步带你掌握这一核心概念。
【前端资料领取】点赞关注+私信学习
热门标签
