freeCodeCamp.org视频
JavaScript Event Loop & Asynchronous Programming
7.2Score
可直接观看的视频资源打开原视频
TL;DR · AI 摘要
该视频深入解析 JavaScript 事件循环机制，通过调用栈、任务队列、微任务队列的协作关系，阐明异步代码执行顺序与常见陷阱。
核心要点
- 事件循环本质是单线程下协调宏任务与微任务执行的调度机制
- Promise.then() 回调属于微任务，总在当前宏任务结束后立即执行
- setTimeout(fn, 0) 不保证立即执行，仅表示‘下一个宏任务周期’触发
结构提纲
按章节快速跳转。
解释 JavaScript 单线程特性与浏览器 I/O 非阻塞需求之间的矛盾。
划分调用栈、Web API、宏任务队列、微任务队列四大组件及其交互流程。
对比 setTimeout/Promise/setImmediate 等典型任务类型及其优先级规则。
通过嵌套 setTimeout 和 Promise 链代码示例，可视化输出时序。
指出‘0ms 定时器即同步’等误解，并介绍 Performance.now() 与 console.time() 辅助验证方法。
思维导图
用一张图看清主题之间的关系。
查看大纲文本（无障碍 / 无 JS 友好）
- JavaScript 事件循环
- 核心组件
- 调用栈
- Web API 环境
- 宏任务队列（Timer/IO/UI）
- 微任务队列（Promise/queueMicrotask）
- 执行规则
- 一次只执行一个宏任务
- 宏任务结束后清空微任务队列
- 渲染前强制清空微任务
金句 / Highlights
值得收藏与分享的关键句。
微任务队列在每次宏任务结束时清空，且不被新宏任务插入打断——这是 Promise 链高优先级的根本原因。
浏览器每帧渲染前会检查微任务队列，因此高频 Promise 回调可能阻塞 UI 更新，需谨慎使用。
Node.js 的 process.nextTick() 比 Promise.then() 更早执行，属于‘微任务中的超微任务’。
#JavaScript#Event Loop#异步编程#前端