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,再次检查微任务,循环往复(事件循环)。
相关推荐
我命由我123458 小时前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
Hopebearer_9 小时前
页面突然只剩 DOM?一次静态资源版本错配排查
前端·部署
抱抱宝9 小时前
Agent-study项目教程(03):手写 Mini-ReAct Agent(不依赖框架)
javascript·人工智能·gpt·react.js·prompt·agent
东风破_9 小时前
ESLint 是什么?为什么你的项目需要它?
前端·后端·代码规范
用户938515635079 小时前
Next.js 笔记系统(二):Redis 数据服务与侧边栏组件拆分实战
javascript·全栈
WWJA王文举9 小时前
I²C通信完整流程详解:START、地址、ACK、数据、Repeated START和STOP一次讲透
c语言·开发语言
zhanghaha131410 小时前
Python进阶教程:6_JSON 数据解析 —— 新手完全指南
开发语言·python·json
圣殿骑士-Khtangc11 小时前
Go字符串高效拼接性能对比与底层原理分析
服务器·前端·golang
qq_4480111611 小时前
C语言中的动态内存分配
c语言·开发语言·php
BigTopOne11 小时前
【ijkplayer】 硬解码流程
前端