Web Worker 是什么？如何使用？有什么限制？

// 创建 Worker
const worker = new Worker('worker.js')

// 发送数据
worker.postMessage({ command: 'calculate', data: [1, 2, 3] })

// 接收 Worker 返回的数据
worker.onmessage = (e) => {
  console.log('结果:', e.data)
}

// 错误处理
worker.onerror = (e) => {
  console.error('Worker error:', e.message)
}

// 终止
worker.terminate()

// 接收主线程数据
self.onmessage = (e) => {
  const { command, data } = e.data
  
  if (command === 'calculate') {
    const result = heavyComputation(data)
    // 发送结果回主线程
    self.postMessage(result)
  }
}

function heavyComputation(data) {
  // 耗时计算...
  return data.reduce((sum, n) => sum + n, 0)
}

// 内联 Worker（不需要单独文件）
const workerCode = `
  self.onmessage = (e) => {
    const result = e.data * 2
    self.postMessage(result)
  }
`
const blob = new Blob([workerCode], { type: 'application/javascript' })
const worker = new Worker(URL.createObjectURL(blob))

// 多个标签页共享同一个 Worker
const sharedWorker = new SharedWorker('shared-worker.js')
sharedWorker.port.onmessage = (e) => console.log(e.data)
sharedWorker.port.postMessage('hello')

// ArrayBuffer 可以零拷贝转移（原线程不能再使用）
const buffer = new ArrayBuffer(1024 * 1024)
worker.postMessage(buffer, [buffer]) // 第二个参数是 transfer list
console.log(buffer.byteLength) // 0（已转移）

// 大数据排序
worker.postMessage({ data: hugeArray })
// 主线程仍然流畅

// 实时图像处理
const canvas = document.querySelector('canvas')
const imageData = canvas.getContext('2d').getImageData(0, 0, w, h)
worker.postMessage(imageData, [imageData.data.buffer])
// Worker 处理后返回新的 imageData