Web Worker 有什么用？有哪些限制？

详细解析#

适合做什么#

• 大量数据的计算、排序、筛选、聚合
• 加解密、压缩和解压
• 图片、音视频处理；配合 OffscreenCanvas 还能在 Worker 里绘图
• 大文件分片计算 hash，用于秒传和断点续传（见大文件上传）
• 复杂的解析工作，如 Markdown 渲染、代码高亮、Excel 解析

网络请求本身就是异步的，不会阻塞主线程，单纯为了发请求而用 Worker 没有收益。

通信和数据传递#

• 一方调用 postMessage(data)，另一方监听 message 事件，从 event.data 取数据
• 数据经过结构化克隆：支持普通对象、数组、Map、Set、Date、ArrayBuffer、Blob 等，也能处理循环引用；对象的原型不会保留，class 实例传过去会变成普通对象
• 数据很大时复制有明显开销。ArrayBuffer、MessagePort、ImageBitmap、OffscreenCanvas 等可转移对象（Transferable）可以放进第二个参数转移所有权，不复制数据；转移后原来的一方就不能再使用了

限制#

• 不能访问 DOM、window、document，Worker 里的全局对象是 self
• 不能使用 localStorage、sessionStorage，也不能调用 alert 这类界面相关的 API
• 可以使用 fetch、XMLHttpRequest、WebSocket、IndexedDB、定时器等
• Worker 脚本必须和页面同源
• 和主线程不共享变量，只能通过消息通信（SharedArrayBuffer 除外）

创建成本#

每个 Worker 都是一个独立的线程，有自己的 JS 运行环境，创建要花时间、占内存。频繁的任务应该复用同一个 Worker，或者按 navigator.hardwareConcurrency（CPU 逻辑核数）建一个 Worker 池，任务排队分配给空闲的 Worker。不再需要时，主线程调用 worker.terminate()，或者 Worker 内部调用 self.close() 释放。

Worker 的种类#

工程化#

• Vite 中这样创建：new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })，构建时会单独打包 Worker 文件；webpack 5 也支持这种写法
• canvas.transferControlToOffscreen() 可以把画布的控制权转给 Worker，在 Worker 里用 OffscreenCanvas 绘图
• Comlink 库用 Proxy 把 postMessage 包装成函数调用，主线程可以像调用异步函数一样调用 Worker 里的方法

代码示例#

主线程把 500 万个数字交给 Worker 排序，排序期间页面照常响应：

// main.js：主线程
const worker = new Worker(new URL('./sort.worker.js', import.meta.url), { type: 'module' })

worker.addEventListener('message', (e) => {
  const sorted = new Float64Array(e.data)
  console.log('最小值', sorted[0], '最大值', sorted[sorted.length - 1])
  worker.terminate() // 用完释放线程
})

worker.addEventListener('error', (e) => {
  console.error('Worker 出错：', e.message)
})

const data = new Float64Array(5_000_000).map(() => Math.random())
// 第二个参数是转移列表：ArrayBuffer 的所有权交给 Worker，不复制数据
worker.postMessage(data.buffer, [data.buffer])
console.log(data.length) // 0，已经转移，主线程不能再使用

// sort.worker.js：Worker 线程，全局对象是 self
self.addEventListener('message', (e) => {
  const data = new Float64Array(e.data)
  data.sort() // TypedArray 默认按数值排序，耗时操作放在这里不会卡住页面
  self.postMessage(data.buffer, [data.buffer]) // 排好后再转移回主线程
})

面试官可能追问#

易错点#

• Worker 不是越多越好：创建有成本，数量超过 CPU 核数也不会更快
• 传大数据时默认是复制，要用 Transferable 转移；转移后原来的一方不能再访问
• Worker 只解决 CPU 密集型任务的卡顿，对网络请求这类异步 I/O 没有帮助