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,再次检查微任务,循环往复(事件循环)。
相关推荐
子兮曰4 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰4 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
小羊没烦恼!4 天前
初探性能优化——2个月到4小时的性能提升
java·开发语言·windows·算法·c#
前端小万4 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝4 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
伞伞悦读4 天前
【第38期】Python 模块与包详解:import、from、模块搜索路径、包结构和 __init__
开发语言·python
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
C语言小火车4 天前
C/C++ 为什么需要编译器?
开发语言·c++
李少兄4 天前
JavaScript 隐式全局变量解析
javascript