JS 底层探究-- 事件循环

JS 主线程单线程,同一时刻仅执行一个任务。

执行规则:同步任务优先执行,所有同步执行完毕后,再处理异步任务

一、同步任务

存放在 调用栈 (Call Stack),代码从上到下依次执行,栈空才会去读取任务队列。

二、微任务

同步代码执行完后,优先清空所有微任务,再执行宏任务。

常见微任务:

  • Promise.then / .catch / .finally
  • async/await 后续代码(await 之后)
  • queueMicrotask()
  • MutationObserver(浏览器端)

三、宏任务

微任务队列清空后,才执行宏任务。每执行完一个宏任务,就再次检查微任务。

常见宏任务:

  • setTimeout / setInterval
  • setImmediate(Node)
  • DOM 事件、UI 渲染
  • AJAX 请求

四、完整执行流程(浏览器事件循环)

  1. 执行全局同步代码,依次压入调用栈执行;
  2. 同步代码执行完毕,调用栈为空
  3. 读取微任务队列 ,一次性执行所有微任务
  4. 微任务全部清空后,取出第一个宏任务执行;
  5. 该宏任务执行完 → 回到步骤 3,再次检查微任务,循环往复(事件循环)。
相关推荐
goDeep1 小时前
useMemo 和 useCallback 的区别,我终于搞懂了
前端
小亮学前端1 小时前
在1Panel中部署Nuxt项目
前端·vue.js
产品研究员1 小时前
AI生成可用的React交互代码实测:Lovable vs Stitch vs Paico
前端·react.js·aigc
labixiong1 小时前
Prompt 工程:当一段文字学会了思考、行动与统治
前端·ai编程
biubiubiu_LYQ2 小时前
入门开发者必学篇之JS事件循环:为什么你的代码输出总翻车?
前端·javascript
asdfg12589632 小时前
C 语言中产生伪随机数的标准做法
c语言·开发语言
HwJack202 小时前
鸿蒙背景下 Cocos Creator 的三大 JS 引擎:JIT 与热更新的十字路口
javascript·华为·harmonyos
KobeSacre2 小时前
JUC 概述
java·开发语言
程序员黑豆2 小时前
AI全栈开发之Java:怎么安装JDK
前端·ai编程·全栈