调用栈、微任务、宏任务的执行流向是一条有明确先后顺序的流水线：先执行宏任务同步代码（入栈出栈），再清空微任务队列，最后取下一个宏任务，循环往复。
调用栈、微任务、宏任务的执行流向，本质不是“画图”，而是理清三者在事件循环中如何协作。它是一条有明确先后顺序的流水线，不是并列结构。
调用栈：同步代码的执行现场
所有同步代码都在这里逐行执行，遵循后进先出（LIFO）规则。函数调用一层套一层，返回时逐层弹出。它不处理异步逻辑，只负责把当前宏任务里的同步部分跑完。
- 遇到
console.log、变量赋值、普通函数调用等，直接入栈执行 - 遇到
setTimeout、Promise构造器等，它们的同步部分（如new Promise(() => {...})里的回调）会立即执行，但.then或定时器回调不会进调用栈——它们被交给宿主环境暂存 - 调用栈一旦清空，就代表当前宏任务的同步阶段结束
宏任务：事件循环的“主节奏”单位
每个宏任务启动一次完整流程：执行同步代码 → 检查并清空微任务队列 → （可能）渲染 → 取下一个宏任务。常见宏任务包括：<script></script> 全局代码、setTimeout 回调、setInterval 回调、用户点击事件、fetch 的回调（注意：fetch() 本身是宏任务发起者，但响应处理属于后续宏任务）。
- 宏任务队列是先进先出（FIFO），但每次只取一个执行
- 整段脚本本身就是第一个宏任务，所以你写的顶层代码总是在最开始执行
-
setTimeout(fn, 0)不等于“立刻执行”，而是尽快排进宏任务队列，实际执行要等前面所有宏任务和它们附带的微任务走完
微任务：紧贴宏任务尾部的“快闪队列”
微任务不在宏任务执行中途插入，而是在它的同步部分彻底结束之后、下一轮宏任务开始之前，一次性全部执行完毕。这保证了状态更新的连贯性，比如 Vue 的响应式更新或 Promise 链的连续处理。
- 只要当前宏任务结束，引擎就会检查微任务队列；有则全部执行，没有才继续
-
Promise.then、async/await中 await 后的代码、MutationObserver都属于微任务 - 微任务执行过程中产生的新微任务（比如
then里又返回一个Promise），也会被加入当前微任务队列末尾，并在本轮内执行完
执行流向可简化为四步闭环
这个流程不断重复，形成事件循环：
- 从宏任务队列取一个任务（如全局脚本），推入调用栈执行其同步代码
- 同步代码执行中，遇到异步操作（如
setTimeout、Promise.resolve().then），分别注册到宏/微任务队列 - 同步代码执行完毕，调用栈清空；立即执行所有排队中的微任务（直到队列为空）
- 微任务清空后，浏览器可能触发一次渲染；然后回到第一步，取下一个宏任务
