Chrome DevTools Performance 面板自v96起可录制Web Worker执行轨迹，需满足new Worker创建、同源或启用blob URL flag，并勾选“Workers”等选项；录制后Worker线程以独立轨道显示，仅含Scripting、GC、Idle事件；配合console.time()可在User Timing轨道精确定位耗时逻辑；支持导出JSON并跨录制对比分析优化效果。
Chrome DevTools 的 Performance 面板可以记录并分析主线程活动，但默认情况下无法直接捕获 Web Worker 线程的详细执行堆栈和函数级耗时。不过，通过合理配置和辅助手段，仍可有效诊断 Worker 的负载瓶颈。
启用 Worker 的性能采样
Chrome 从 v96 起支持在 Performance 面板中录制 Worker 执行轨迹，前提是满足以下条件：
- Worker 必须通过
new Worker(...)创建（不支持模块化 Worker 或 Service Worker） - 页面与 Worker 同源（或 Worker 来自
blob:URL 且已启用相关 flag） - 在 DevTools 的 Performance 面板中勾选 “Record network activity” 和 “Record JavaScript CPU profiles”，同时确保 “Workers” 复选框被启用（位于录制设置底部）
识别 Worker 线程在时间轴中的位置
录制完成后，在顶部线程列表中会出现以 Worker (xxx.js) 命名的独立轨道。点击该轨道可展开其调用栈、事件分类（如 Scripting、Rendering、Idle）及函数火焰图。
注意：Worker 不会触发 Layout、Paint 或 Composite 事件，其轨道中仅包含 Scripting（JS 执行）、Garbage Collection、Idle 等类型。若发现长时间 Scripting 占比过高，说明 JS 计算密集；若频繁 GC，则可能存在内存分配压力。
立即学习“前端免费学习笔记（深入）”；
结合 console.time() 定位具体逻辑块
Performance 面板提供宏观视图，但难以精确定位某段计算耗时。可在 Worker 内部插入计时标记：
// 在 Worker 中
self.onmessage = function(e) {
console.time('process-data');
const result = heavyComputation(e.data);
console.timeEnd('process-data'); // 该标记会出现在 Performance 的 User Timing 轨道中
self.postMessage(result);
};
录制后，在 Performance 时间轴底部找到 User Timing 轨道，即可看到带名称的绿色标记及其持续时间，便于关联代码片段。
导出与对比分析
点击录制右上角的 “⋯” → “Export” 可保存为 JSON 文件。可用 Chrome 自带的 timeline-viewer 或 VS Code 插件（如 “Chrome DevTools Timeline Viewer”）打开，支持跨多次录制对比关键函数耗时变化，验证优化效果。
