调用栈、微任务和宏任务共同构成javascript异步执行骨架：调用栈同步执行并遵循lifo；宏任务划分ui帧边界，每次事件循环执行一个；微任务在宏任务结束后立即批量执行，保障状态同步与dom更新一致性。
调用栈、微任务和宏任务不是孤立概念，而是现代前端应用中异步执行的真实骨架。它们共同决定了代码“什么时候执行”“为什么这样执行”，直接影响页面响应、动画流畅度、接口请求顺序甚至状态更新一致性。
调用栈是同步执行的唯一舞台
所有函数调用都必须压入调用栈才能运行，它遵循后进先出原则。同步代码逐行推进，遇到函数就入栈，返回就出栈。一旦遇到异步操作（如 fetch、setTimeout、Promise构造器），JS引擎不会卡住等待结果，而是立刻继续执行后续同步代码——此时异步逻辑被移交宿主环境（浏览器或Node.js）处理，回调则暂存于对应队列中。
- 调用栈清空，是触发后续异步调度的必要前提
- 哪怕只有一行 console.log，它也是宏任务（script整体）中的一环
- 递归过深或无限循环会撑爆调用栈，直接报 RangeError
微任务在每次宏任务结束时集中爆发
微任务不排队等下一轮循环，而是在当前宏任务执行完、调用栈刚清空的瞬间，一口气执行完队列里所有任务。这种“立即但不打断”的特性，让它们成为状态同步、响应链式更新的理想载体。
- Promise.then/catch/finally、queueMicrotask、MutationObserver 都属于微任务
- 一个 Promise.resolve().then(...).then(...) 会生成多个微任务，按注册顺序依次执行
- 在 Vue 或 React 的响应式更新中，nextTick 和 useEffect 的清理/执行时机，底层都依赖微任务保证 DOM 更新后才触发
宏任务驱动页面节奏与生命周期
宏任务代表一次完整的“工作单元”，每次事件循环只取一个执行。浏览器会在每个宏任务结束后尝试渲染（如果需要），因此宏任务天然划分了UI帧边界。
- 常见宏任务包括：script整体、setTimeout/setInterval、用户事件（click、input）、网络回调（fetch.then、XMLHttpRequest）、UI渲染本身
- 两个 setTimeout(fn, 0) 不会连续执行——中间必然插入一次微任务清空过程
- 动画帧（requestAnimationFrame）虽常被误认为微任务，实为独立的宏任务类型，在渲染前执行，优先级高于普通 setTimeout
三者协同的真实执行节奏
以一次点击触发 API 请求并更新视图为例：
- 用户点击 → 事件回调作为宏任务入队 → 执行：发起 fetch，创建 Promise
- fetch 异步进行，同步部分结束 → 调用栈清空 → 立即执行微任务（如 Promise 构造器内的 resolve 回调）
- 响应返回 → fetch.then 回调作为微任务入队 → 下一轮微任务清空时执行：解析数据、触发 setState 或 ref 更新
- React/Vue 在微任务中批量更新状态 → 下一个宏任务开始前完成 DOM diff → 浏览器在下一个宏任务后安排渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
