事件循环需通过实践掌握，本质是JS单线程协调同步任务、异步回调与渲染的调度规则；调用栈执行同步代码，异步操作交由API处理；任务队列分宏任务（如setTimeout）和微任务（如Promise.then），每次调用栈清空后先清空所有微任务再取一个宏任务执行。
事件循环不是靠背概念记住的，是靠反复观察代码执行顺序、调试异步行为、对比不同写法结果练出来的。它本质是 JS 单线程如何协调同步任务、异步回调和渲染的调度规则，理解它才能真正看懂 setTimeout、Promise.then、async/await 为什么按那个顺序执行。
搞清执行上下文与任务队列的基本分工
先别急着记“宏任务微任务”，先建立两个直观认知：
-
调用栈（Call Stack）：只管同步代码，一条一条往下压、往上弹；一旦遇到异步操作（比如
setTimeout或new Promise），就立刻交给浏览器或 Node.js 的 API 去处理，自己继续跑后面的同步代码； - 任务队列（Task Queues）：分两类——宏任务队列（如 setTimeout 回调、I/O 回调、script 整体代码）和微任务队列（如 Promise.then/catch/finally、queueMicrotask）。每次调用栈清空后，JS 引擎会先清空所有微任务，再取一个宏任务执行。
用最小可验证例子动手拆解执行顺序
把下面这段代码复制进浏览器控制台，逐行分析输出顺序，再改一两处（比如把 Promise.resolve() 换成 new Promise(r => r())），观察变化：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4);
预期输出是 1 → 4 → 3 → 2。重点不是记住这个结果，而是能说出：为什么 3 在 4 后面？为什么 2 最后才出来？每一步对应调用栈怎么变、微任务队列怎么入、宏任务怎么排队。
从常见组合场景中识别模式
实际开发中，事件循环问题多出现在这些地方，可针对性练习：
-
多个 Promise 链嵌套：注意
.then返回新 Promise 会触发下一轮微任务，连续写十个.then不会卡住主线程，但会连续清空微任务队列； -
async/await 与 Promise 的等价转换：把
async function f() { await p; console.log('done'); }手动转成p.then(() => console.log('done'))，体会 await 实际插入的是微任务； - setTimeout(fn, 0) 和 Promise.then 的优先级差异：前者进宏任务队列，后者进微任务队列，所以哪怕时间设为 0，也一定晚于当前轮次的所有微任务；
-
DOM 渲染时机判断：
requestAnimationFrame在下一次重绘前执行，位置介于微任务之后、宏任务之前，适合做动画帧控制。
结合调试工具验证直觉
光读文字容易绕晕，动手才是关键：
- 在 Chrome DevTools 的 Sources 面板打断点，观察 Call Stack、Scope 和 Event Listener Breakpoints 的变化；
- 使用
performance.now()或console.time()测量不同写法的实际耗时差异； - 在 Node.js 中运行带
process.nextTick的代码，对比它和 Promise.then 的执行顺序（nextTick优先级略高于微任务，但仅限 Node 环境）。
