UD5工具箱
快速开始
事件循环延迟监测工具零配置即开即用，以下步骤帮助您在两分钟内完成首次性能检测。
第一步：启动监测
打开工具页面后，界面默认显示"等待监测"状态。点击绿色的"开始监测"按钮，工具立即开始采样。此时可以看到当前延迟数值开始跳动，趋势图从左向右绘制，统计指标实时更新。
提示：建议先打开您需要监测的目标页面（与本工具并排显示），然后点击"开始监测"，让工具在后台持续记录主线程延迟数据。
第二步：观察趋势
监测运行一段时间后（建议至少 30 秒），观察右侧趋势图的波动情况。如果曲线平稳且延迟保持在 5ms 以下，说明主线程非常空闲。如果出现周期性的尖峰，可能与定时任务或动画帧有关。如果延迟持续偏高，说明页面存在性能瓶颈。
关注点：P95 延迟比平均延迟更能反映真实用户体验，如果 P95 超过 16ms，意味着部分帧已经掉帧。
第三步：模拟阻塞测试
点击"模拟主线程阻塞"区域中的三个按钮之一，主动触发一次长任务。推荐从"轻微 150ms"开始，观察趋势图上是否出现对应的延迟尖峰。然后尝试"中等 500ms"和"严重 1.5s"，对比不同阻塞程度下延迟的变化幅度和恢复时间。
目的：此步骤验证检测工具的灵敏度，同时帮助您建立对不同延迟级别的直觉认知。在实际项目中，类似的延迟可能由复杂的计算、大量 DOM 操作或同步网络请求引起。
第四步：查看统计与异常
监测结束后，查看左侧的六项统计指标。重点关注峰值延迟（是否超过 100ms 的危险线）、P95 延迟（95% 的采样是否在 16ms 以内）和阻塞等级（整体状态评估）。然后向下滚动查看"异常延迟记录"列表，了解每次异常发生的时间和延迟值。
分析：如果异常记录频繁出现，说明主线程存在系统性的阻塞问题，需要结合 Chrome DevTools 进一步定位具体代码。
第五步：重置与多次测量
点击"重置"按钮清空所有数据，然后在目标页面执行特定操作（如页面加载、动画播放、用户交互）时重新启动监测。通过多次测量和对比不同场景下的延迟数据，您可以精确定位性能问题的发生条件和触发因素。这种对比测试方法比单次测量更有价值，能够区分偶发延迟和系统性问题。
最佳实践：建议在相同条件下（相同浏览器、相同网络环境）进行多次测量，取平均值或中位数作为基准。记录每次测量的统计指标，建立性能基线，后续优化后对比验证效果。