UD5工具箱
核心功能与特性详解
长任务检测器提供了一系列专业的功能来帮助开发者监控和分析页面中的长任务。以下是各项核心功能的详细介绍：
实时长任务监控
工具的核心功能是基于 PerformanceObserver 的实时长任务监控。启用后，浏览器每次检测到执行时间超过 50 毫秒的任务，都会立即被工具捕获并记录。监控过程完全异步，不会对页面的正常执行流程产生干扰。每条长任务记录包含了开始时间、持续时间、结束时间等基本信息，以及任务的详细归属信息。监控结果实时更新在界面上，开发者可以随时查看当前页面的长任务情况。
长任务来源追踪
工具能够追踪每个长任务的来源信息，包括任务的类型和触发来源。来源类型包括事件处理器（event handler）、脚本执行（script）、布局计算（layout）、样式计算（style）等。对于事件类型的长任务，还会记录触发事件的 DOM 元素信息。这些信息帮助开发者快速定位到导致长任务的具体代码位置。工具还提供了来源筛选功能，可以按来源类型过滤长任务列表，专注于分析特定类型的问题。
长任务详情列表
所有检测到的长任务会以列表的形式展示在界面上。列表按时间顺序排列，每条记录显示任务的持续时间、开始时间、来源类型和触发元素。超过 100 毫秒的严重长任务会用红色标记，50 到 100 毫秒之间的长任务用橙色标记，便于快速识别严重问题。点击列表中的某条记录，可以查看该任务的详细信息，包括完整的 attribution 数据、调用栈信息（如果可用）以及相关的性能指标。
长任务统计分析
工具会自动对检测到的长任务进行统计分析，生成关键性能指标。统计内容包括：长任务总数、平均持续时间、最大持续时间、长任务总阻塞时间、长任务频率（每分钟长任务数量）等。这些统计数据帮助开发者快速评估页面的长任务严重程度。工具还会计算长任务对 INP 指标的潜在影响，给出优化建议的优先级排序。
长任务趋势图表
工具提供长任务频率和持续时间的趋势图表，以时间轴的形式展示长任务的发生情况。图表支持缩放和拖拽操作，可以查看特定时间段的详细数据。趋势图表有助于发现周期性的长任务问题，例如每隔一段时间就会出现的大量长任务，这可能与定时器、轮询机制或周期性数据更新有关。图表还支持导出为图片格式，方便在报告中使用。
长任务阈值自定义
虽然标准的长任务阈值是 50 毫秒，但开发者可以根据项目需求自定义检测阈值。例如，对于性能要求极高的交互式应用，可以将阈值降低到 30 毫秒甚至更低，以便发现更细微的性能问题。对于一般的信息展示类页面，可以将阈值提高到 100 毫秒，减少干扰信息。阈值调整在工具运行时即可生效，无需重启录制。工具还提供了多个预设阈值配置，一键切换不同严格程度的检测标准。
录制暂停与恢复
在监控过程中，开发者可以随时暂停和恢复录制。暂停录制后，性能监控会暂时停止，但之前录制的数据仍然保留。恢复录制后，监控会继续从暂停点开始。这个功能在以下场景中特别有用：开发者需要在录制过程中执行一些已知会触发长任务的操作（如性能测试脚本），但不想这些操作的长任务数据干扰正常的分析结果。暂停功能也可以用于分段录制不同的页面状态。
数据导出与分享
工具支持将录制的长任务数据导出为多种格式。JSON 格式包含所有长任务的完整数据，可以导入到其他分析工具中进行深入处理。CSV 格式适合在 Excel 等表格软件中查看和分析。HTML 报告格式包含统计摘要、趋势图表和详细的任务列表，是一个完整的分析报告，可以直接分享给团队成员。导出的数据可以作为性能基准的一部分，用于后续的性能对比分析。
高级过滤与分组
当页面中检测到大量长任务时，高级过滤和分组功能可以帮助开发者快速找到关注的重点。支持按持续时间范围过滤（如只显示超过 200 毫秒的长任务）、按来源类型过滤（如只显示事件处理器触发的长任务）、按时间段过滤（如只显示某个时间窗口内的长任务）。分组功能可以将长任务按来源元素分组，快速识别哪些元素是长任务的"重灾区"。
这些功能的协同工作使得长任务检测器成为前端性能优化不可或缺的工具，帮助开发者从发现到分析再到解决长任务问题的全流程。