UD5工具箱
第一步：了解界面布局
打开工具页面后，首先熟悉整体界面布局。页面上方标注了「ES2022」和核心特性说明。中间区域分为三个部分：左侧是预设实验选择区（数据获取、配置加载、动态导入、并行请求、错误处理）；中间是代码编辑器，显示当前实验的 JavaScript 代码；右侧是控制台输出区域，显示代码执行的 console.log 输出和时间线。页面底部有「传统方式」对比代码区域。
第二步：运行数据获取实验
点击「数据获取」预设按钮，代码编辑器会加载对应的示例代码。代码使用顶级 await 直接在模块顶层调用 await fetch() 获取远程数据。点击「运行」按钮（或按 Ctrl+Enter），右侧控制台会显示执行结果。然后点击「传统方式」对比，查看使用 async 函数包裹的等效代码。对比两种方式的代码结构，理解顶级 await 如何消除样板代码。
第三步：探索配置加载与并行请求
切换到「配置加载」预设，观察模块初始化时异步加载配置的流程。然后运行「并行请求」预设，对比串行 await 和并行 Promise.all 的执行时间差异。修改代码中的模拟延迟时间，观察控制台输出的时间线变化。这些实验帮助你理解顶级 await 在实际应用中的性能影响和最佳实践。
第四步：学习错误处理
切换到「错误处理」预设，观察当异步操作失败时的行为。代码演示了使用 try...catch 包裹顶级 await 的方式，以及未捕获错误导致模块加载失败的情况。理解这个实验对于正确使用顶级 await 至关重要——在生产环境中，始终对可能失败的顶级 await 做好错误处理，提供降级方案或合理的错误提示，避免单个异步操作失败导致整个模块不可用。
第五步：体验动态导入
切换到「动态导入」预设，观察使用顶级 await 配合 import() 实现条件性模块导入的场景。根据运行时条件（如浏览器是否支持某个 API）动态选择导入不同的模块实现。这种模式在按需加载功能模块、A/B 测试、兼容性降级等场景中非常实用。运行代码后，在控制台输出中观察模块的加载顺序和条件判断的结果。
第六步：理解阻塞行为
所有预设实验都内置了关于顶级 await 阻塞行为的说明。顶级 await 会阻塞依赖该模块的其他模块加载，这是一把双刃剑——它确保了依赖模块获得的是已经完全初始化的数据，但也可能导致加载延迟。理解这个特性对于在实际项目中合理使用顶级 await 至关重要。建议仅在确实需要的入口模块或关键配置模块中使用，避免在大量模块中滥用。