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,再次检查微任务,循环往复(事件循环)。
相关推荐
爱喝水的鱼丶10 分钟前
SAP-ABAP:ALV通用封装实践——搭建可复用的ALV开发工具类,减少80%重复代码
开发语言·性能优化·sap·abap·erp·alv
脱胎换骨-军哥32 分钟前
C++/Rust无缝互操作:混合系统新常态
开发语言·c++·rust
songroom1 小时前
Kimi K3:Rust封装XTP接口详细教程实践
开发语言·后端·rust
瑞瑞小同学1 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
kebeiovo1 小时前
游戏服务端开发:Actor模型详解(Go语言)
开发语言·后端·golang
HexCIer1 小时前
面向未来的原子化 CSS:UnoCSS 核心架构分析与 Tailwind CSS 现状
前端·css·vite
迷途呀1 小时前
Python:函数中的参数类型
开发语言·笔记·python·langchain·nlp
程序员黑豆1 小时前
鸿蒙应用开发中的单位详解:px、vp、fp、lpx
前端·harmonyos
Herbert_hwt2 小时前
建立Java程序开发
java·开发语言
像我这样帅的人丶你还2 小时前
MCP + npm:给五年前的老系统接上AI
前端·javascript·agent