无需登录 数据私有 本地保存

Workbox 配置生成器 - 自定义 Service Worker 策略

PWA 开发工具 Service Worker Workbox 配置
25
0
0
0
教程概述

本教程将手把手教你使用事件循环可视化器来理解和验证 JavaScript 异步代码的执行顺序。通过七个步骤的详细指导，帮助你建立对事件循环机制的深刻认识。

第一步：认识工具界面

打开工具后，首先熟悉界面的主要区域。左上角是代码编辑器区域，用于输入和编辑 JavaScript 代码。右上角是执行控制面板，包含运行、暂停、重置等操作按钮。中间部分是时间线可视化区域，将展示事件循环的完整执行过程。底部是执行日志面板，实时记录每一步的执行详情。左侧边栏是示例代码库，可以快速加载预设的代码示例。

时间线区域是工具的核心，它将事件循环的抽象过程转化为直观的视觉表示。时间线上方是时间标尺，标注了每个时间点的序号。时间线中的每个方块代表一个任务，不同的颜色代表不同的任务类型。鼠标悬停在方块上可以查看任务的详细信息，包括任务内容、类型和执行时间。

第二步：加载第一个示例

从左侧示例库中选择"基础 setTimeout 示例"加载到编辑器中。这个示例展示了 setTimeout(fn, 0) 和同步代码的执行顺序差异。代码内容如下：

console.log('1 - 同步代码');
setTimeout(() => {
  console.log('2 - setTimeout 回调');
}, 0);
console.log('3 - 同步代码');

在运行之前，先思考一下这段代码的输出顺序。如果你认为是 1-2-3，那么你需要学习事件循环的知识；如果正确答案是 1-3-2，那么理解为什么是这样的执行顺序将会帮助你加深对事件循环的理解。

第三步：运行并观察执行过程

点击"运行"按钮，工具开始模拟事件循环的执行过程。观察时间线上的变化：首先出现的是蓝色方块，代表同步代码 console.log('1') 的执行。接着，setTimeout 被调用，浏览器将回调函数注册到定时器线程（这部分在时间线上不会直接显示）。然后继续执行同步代码 console.log('3')。所有同步代码执行完毕后，时间线显示微任务队列为空。最后，定时器到期，setTimeout 的回调函数作为宏任务被执行，显示红色方块。

通过时间线可以清晰地看到：同步代码总是最先执行的，而 setTimeout 的回调即使延时设置为 0，也会在所有同步代码执行完毕之后才执行。这是因为 setTimeout 的回调被放入了宏任务队列，需要等待当前执行栈清空后才会被取出执行。

第四步：理解微任务优先级

加载"Promise 微任务示例"到编辑器中。这个示例展示了 Promise.then 回调（微任务）与 setTimeout 回调（宏任务）的执行顺序差异。运行后观察时间线，你会发现 Promise 的 then 回调（橙色方块）总是在 setTimeout 回调（红色方块）之前执行。这是因为微任务的优先级高于宏任务。

更进一步，加载"微任务链式调用示例"。这个示例展示了多个 Promise 链式调用时，所有微任务会在当前宏任务结束后被连续执行。观察时间线上连续的橙色方块，它们代表了微任务队列中的所有任务被一次性清空的过程。这种"全清空"的行为是微任务与宏任务的重要区别。

关键理解：
  • 微任务队列在每个宏任务执行完毕后被完全清空
  • 微任务队列中新增的微任务也会在本轮被处理
  • 宏任务每次事件循环 tick 只执行一个
  • 渲染操作在微任务清空之后、下一个宏任务之前执行
第五步：自定义代码实验

在理解了基本的执行顺序后，尝试在编辑器中输入自己的异步代码进行实验。例如，你可以输入包含 setTimeout、Promise、async/await、requestAnimationFrame 等多种异步 API 的组合代码，观察它们的执行顺序是否符合你的预期。

建议尝试以下实验：（1）同时使用多个不同延时的 setTimeout，观察它们的执行顺序；（2）在 Promise 的 then 回调中嵌套 setTimeout，观察嵌套层级对执行顺序的影响；（3）使用 async/await 替代 Promise.then，观察执行行为是否相同；（4）使用 queueMicrotask 函数注册微任务，与 Promise 回调进行对比。每次实验后，记录你的观察结果，与理论知识进行对比验证。

第六步：使用动画控制功能

利用动画控制面板来精细观察事件循环的每一步。将播放速度调整为慢速（0.5x），可以更清楚地观察每个任务的执行过程。使用暂停功能在关键节点停下来思考和分析。单步执行功能允许你一次只前进一步，非常适合逐行分析代码的执行逻辑。进度条可以快速跳转到任意时间点，方便查看特定阶段的执行状态。

建议在慢速播放模式下，同时观察时间线和底部的执行日志。时间线提供直观的视觉概览，而执行日志提供详细的文本信息。两者的配合使用可以帮助你更全面地理解事件循环的执行过程。如果发现有不理解的地方，可以暂停播放，查阅相关的知识点后继续。

第七步：进阶学习与总结

通过前六步的学习，你应该已经对事件循环的基本机制有了清晰的理解。接下来，可以使用进阶示例来深入学习更复杂的异步场景。进阶示例包括：Node.js 环境下的事件循环差异、Web Worker 中的事件循环、多个异步操作的竞态条件分析等。每个进阶示例都附带详细的讲解和分析，帮助你将事件循环的知识应用到更广泛的开发场景中。

学习完成后，建议整理你的学习笔记，总结事件循环的关键知识点：（1）同步代码最先执行；（2）微任务在每个宏任务后被完全清空；（3）宏任务每次 tick 只执行一个；（4）渲染在微任务之后执行。掌握这些核心原则后，你就能自信地分析和编写各种异步 JavaScript 代码。本工具可以作为你长期使用的参考工具，在遇到复杂的异步代码时随时回来验证和分析。

🔧 相关工具