HTML5中借助ChromePerformance分析Worker线程负载

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 性能采样

从 v96 开始，Chrome 允许通过 Performance 面板录制 Worker 执行轨迹，但需要满足以下条件：

• Worker 必须通过 new Worker(...) 创建（不支持模块化 Worker 或 Service Worker）
• 页面与 Worker 同源（或 Worker 来自 blob: URL 且已启用相关 flag）
• 在 DevTools 的 Performance 面板中勾选 需要记录的两项是“Record JavaScript CPU profiles”与“Record network activity”，并且确认 “Workers” 复选框已经启用（可在录制设置底部找到）

在时间轴内找出 Worker 线程所在区域

录制结束后，顶部线程列表会显示以 Worker (xxx.js) 命名的独立轨道。展开方式是点击这条轨道，之后会呈现函数火焰图、调用栈和事件分类，包括 Idle、Rendering、Scripting。

注意：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 文件，并由 VS Code 插件（如“Chrome DevTools Timeline Viewer”）或 Chrome 自带的 timeline-viewer 打开。