JavaScript异步能力靠事件循环机制实现：调用栈执行同步代码，微任务（如Promise.then）在宏任务（如setTimeout）前优先执行，事件循环持续协调三者确保非阻塞与有序执行。
JavaScript 的异步能力不是靠多线程实现的，而是靠一套精巧协作的机制：调用栈负责执行同步逻辑，任务队列（含宏任务和微任务）暂存待处理的回调，事件循环则像一个永不疲倦的调度员，在它们之间来回穿行，确保代码既不阻塞又按预期顺序运行。
调用栈：同步代码的执行现场
它是一个后进先出（LIFO）的结构，函数调用时压入帧，返回时弹出。所有同步代码都在这里逐行执行。一旦遇到异步操作（比如 setTimeout 或 fetch），JS 引擎不会卡住等待结果，而是立刻把控制权交还给调用栈，继续往下跑——真正耗时的工作由浏览器的其他线程（如网络线程、定时器线程）在后台完成。
关键点在于：调用栈必须清空，事件循环才会去取下一个任务。如果里面卡着一个死循环或超长计算，整个页面就会“冻结”，用户交互完全无响应。
微任务与宏任务：两类异步任务的优先级差异
任务不是一股脑塞进同一个队列的。浏览器把异步回调分成了两个层级：
立即学习“Java免费学习笔记（深入）”；
- 微任务（Microtask）：包括 Promise.then/catch/finally、MutationObserver、queueMicrotask。它们优先级更高，只要调用栈一空，就全部执行完，中间不插其他任务。
- 宏任务（Macrotask）：包括 setTimeout、setInterval、I/O 回调、UI 渲染、整体脚本执行。每次只取一个执行，执行完再回头清微任务。
这种设计让 Promise 链能快速响应，避免被定时器或用户点击打断；也保证了 UI 渲染有机会在宏任务之间发生，不至于一直不更新。
事件循环：协调三者的永动调度器
它不是一个线程，也不是一段可被 JS 调用的代码，而是一个底层持续运行的检查流程：
- 执行当前所有同步代码（填满并清空调用栈）
- 立即执行所有排队的微任务（直到微任务队列为空）
- 执行一次宏任务（比如一个 setTimeout 回调）
- 再次清空微任务队列（因为刚执行的宏任务可能又产生了新 Promise）
- 重复上述步骤
这个循环全程由 JS 引擎和宿主环境（如浏览器）协同完成。JS 主线程只做“调度”和“执行回调”，真正的重活（下载、计时、绘图）都由浏览器多线程后台承担。
为什么页面不卡？关键在分工明确
JS 不直接处理耗时操作，只负责定义“等结果回来后做什么”。网络请求交给网络线程，定时器交给定时器线程，DOM 变更通知交给渲染线程——它们各自完成后，把回调放进对应队列，JS 主线程只需轻量地“领任务、干完下班”。
调用栈永远保持轻量，压力被卸载到浏览器后台；任务队列则充当缓冲区，让异步变得可控、可预测。这才是单线程 JavaScript 支撑起现代富交互应用的底层逻辑。
