Web Worker 如何用于前端性能优化？适合处理哪些任务？

简化版

Web Worker 可以把耗时计算放到独立线程执行，避免阻塞主线程渲染和交互。它适合大 JSON 解析、图片处理、加解密、复杂搜索、Excel 解析、WASM 计算等 CPU 密集任务；不适合直接操作 DOM。使用时要注意通信成本、数据拷贝、Transferable、任务拆分、错误处理和 Worker 生命周期。

详细版

前端性能优化不只是减少资源体积，也包括减少主线程阻塞。Worker 的价值是把计算移出主线程。

任务	是否适合 Worker	原因
DOM 更新	不适合	Worker 不能直接访问 DOM
Excel 解析	适合	CPU 密集且耗时
图片压缩	适合	可独立计算
简单点击处理	不适合	通信成本大于收益
WASM 运算	适合	可与主线程并行

const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' })

worker.postMessage({ type: 'parse', payload: bigText })
worker.onmessage = event => {
  render(event.data)
}

Worker 优化的是主线程流畅度，不一定减少总计算量；有时还会增加通信成本。

完整版教学

一、为什么 Worker 能优化性能

浏览器主线程负责 JS 执行、样式计算、布局、绘制调度和用户事件处理。如果大计算占住主线程，页面就不能及时响应点击和滚动，INP 也会变差。

Web Worker 运行在独立线程中，可以承担不依赖 DOM 的计算任务，让主线程专注渲染和交互。

二、Worker 的边界

Worker 不能直接访问 DOM，也不能直接调用很多与页面 UI 相关的 API。它通过 postMessage 和主线程通信。

这意味着 Worker 适合“输入数据 → 计算 → 输出结果”的任务，不适合频繁依赖页面状态的任务。

三、通信成本要考虑

把数据发给 Worker 不是免费的。普通对象会经过结构化克隆，大数据传输可能很贵。

对于 ArrayBuffer、图片二进制等，可以使用 Transferable 转移所有权，减少拷贝。

const buffer = new ArrayBuffer(1024 * 1024)
worker.postMessage({ buffer }, [buffer])

转移后主线程不再拥有这个 buffer，这是性能和使用语义之间的取舍。

四、任务要拆分和取消

Worker 不是开了就万事大吉。如果一个 Worker 内部执行超大同步任务，它自己的线程也会卡住，并且结果回来太晚。

更好的方式是把任务拆成小块，支持进度上报、取消和超时。

worker.postMessage({ type: 'cancel', taskId })
worker.onerror = err => {
  console.error('worker failed', err)
}

五、和 requestIdleCallback 的区别

requestIdleCallback 是在主线程空闲时执行低优先级任务；Worker 是把任务放到其他线程执行。一个是调度时机，一个是线程隔离。

如果任务很轻，只是不想抢首屏，可以用 idle callback；如果任务很重，会明显阻塞主线程，更适合 Worker。

六、工程化注意点

现代 Vite、Webpack 都支持以模块方式创建 Worker，但要注意：

Worker 单独打包，体积也要纳入性能预算。
Worker 初始化有成本，不适合每次点击临时创建。
错误和异常要回传主线程。
多个 Worker 不是越多越好，线程过多会抢 CPU。

七、常见误区与追问

误区：用了 Worker 页面一定更快。 Worker 主要改善主线程响应，总耗时可能因为通信成本变长。
误区：Worker 可以直接操作 DOM。 Worker 不能直接访问 DOM，UI 更新仍要回到主线程。
误区：Worker 越多越好。 线程过多会争抢 CPU，低端设备上反而更慢。
追问：大数据传输如何优化？ 使用 Transferable、SharedArrayBuffer 或减少传输频率。
追问：Worker 适合解析大 JSON 吗？ 适合，但结果传回仍有成本，最好控制数据结构大小。
追问：Worker 会改善 INP 吗？ 如果原本交互被主线程计算阻塞，把计算移走通常能改善 INP。

八、加强记忆

Worker 记成“计算搬家”。主线程负责界面，Worker 负责重计算；适合 CPU 密集且边界清楚的任务，但要算通信成本、生命周期和异常处理。

简化版

详细版