UD5工具箱
启动与停止控制
点击"开始监测"按钮即刻启动事件循环延迟采样，工具以固定频率持续测量 setTimeout 回调的实际延迟。监测过程中可随时点击"停止"按钮暂停采样，数据保留在界面上供分析。重置按钮清空所有统计数据和趋势图，从零开始新一轮监测。三个控制按钮设计简洁，操作直观，无需阅读说明书即可上手。
实时延迟趋势图
基于 Canvas 的高性能趋势图实时绘制最近 500 个采样点的延迟变化曲线。X 轴表示采样序号，Y 轴表示延迟毫秒数。图表支持自动缩放，无论延迟是 1 毫秒还是 200 毫秒，都能清晰展示波动趋势。通过观察趋势图，开发者可以快速判断延迟是偶发尖峰还是持续偏高，为性能优化提供方向。
多维统计指标
工具自动计算并展示六项核心统计指标：当前延迟（最新一次采样值）、平均延迟（所有采样的算术平均）、峰值延迟（历史最大值）、最低延迟（历史最小值）、P95 延迟（第 95 百分位数，排除极端值后反映最坏情况的典型表现）以及采样总次数。这些指标从不同角度刻画主线程性能，其中 P95 延迟特别重要，它比平均值更能反映用户实际体验中的尾部延迟。
阻塞等级判定
根据当前延迟值，工具自动将主线程状态划分为四个等级：正常（0-15ms，主线程空闲）、轻度（15-30ms，存在短任务）、中度（30-100ms，可能影响交互）、严重（大于100ms，明显卡顿）。每个等级用不同颜色标识，让开发者一目了然地判断当前性能状态。等级划分参考 RAIL 性能模型和 Chrome DevTools 的长任务定义标准。
主线程阻塞模拟
内置三档阻塞模拟功能，点击对应按钮即可触发不同程度的主线程阻塞：轻微阻塞执行约 150 毫秒的密集计算，模拟短循环或简单 DOM 操作；中等阻塞执行约 500 毫秒，模拟中等复杂度的数据处理；严重阻塞执行约 1.5 秒，模拟大型同步计算或大量布局重排。触发后可立即观察延迟飙升和趋势图变化，验证检测工具的灵敏度和准确性。
异常延迟记录
工具自动捕获所有超过 30ms 阈值的延迟事件，记录其时间戳、延迟值和发生顺序。异常记录以列表形式展示在趋势图下方，支持快速回溯性能问题的发生时间点和严重程度。当异常数量较多时，开发者可以据此判断性能问题的频率和模式，为定向优化提供依据。阈值 30ms 的设定参考了 60fps 帧预算（16ms）的两倍，确保捕获所有可能影响用户体验的延迟。
页面可见性感知
利用 Page Visibility API 自动检测页面是否处于可见状态。当用户切换到其他标签页时，浏览器会对 setTimeout 和 setInterval 进行节流（通常限制为 1 秒间隔），这会导致延迟数据失真。本工具在检测到页面不可见时自动暂停监测，避免将浏览器节流导致的"假延迟"计入统计数据，确保测量结果真实反映主线程的实际阻塞状况。
数据隐私
所有监测数据均在浏览器本地处理和存储，不会发送到任何服务器。页面刷新后数据清空，完全符合隐私保护要求。您可以放心在任何项目页面上使用本工具。