深入理解 Web Worker：Web 应用多线程实践

实际开发中，建议将 terminate() 放在组件销毁或任务完成后的清理逻辑里，防止内存泄漏。

典型应用场景

场景一：复杂算法计算

斐波那契数列这类递归算法非常消耗 CPU，如果在主线程跑，页面会瞬间卡死。用 Worker 就能完美解决。

// fibonacci-worker.js
self.onmessage = function(e) {
  const n = e.data;
  const result = fibonacci(n);
  self.postMessage(result);
};

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

场景二：图片处理

Canvas 图像处理涉及大量像素遍历，非常适合放入 Worker。这里要注意使用 transferable objects 来传递图像数据，避免拷贝开销。

// image-processor-worker.js
self.onmessage = function(e) {
  const imageData = e.data;
  const processedData = processImage(imageData);
  // 关键：传递 buffer 所有权，避免数据拷贝
  self.postMessage(processedData, [processedData.data.buffer]);
};

function processImage(imageData) {
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    // 简单的灰度化处理
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;     // R
    data[i + 1] = avg; // G
    data[i + 2] = avg; // B
  }
  return imageData;
}

场景三：批量数据处理

处理大型数据集时，可以将数据分块发送给 Worker，或者一次性发送后异步处理。

// data-processor-worker.js
self.onmessage = function(e) {
  const { data, operation } = e.data;
  const result = processData(data, operation);
  self.postMessage(result);
};

function processData(data, operation) {
  switch (operation) {
    case 'filter':
      return data.filter(item => item.value > 100);
    case 'sort':
      return [...data].sort((a, b) => a.value - b.value);
    default:
      return data;
  }
}

通信机制与优化技巧

消息传递基础

主线程和 Worker 之间通过 postMessage 发送数据。默认情况下，数据会被结构化克隆（Structured Clone），这意味着对象会被深拷贝。对于大对象，这可能会带来性能损耗。

Transferable Objects

如果传递的是 ArrayBuffer 等二进制数据，可以使用第二个参数指定转移对象。这会直接将内存所有权从主线程转移到 Worker，极大提升效率。

// 主线程
const buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]);

// Worker
self.onmessage = function(e) {
  const buffer = e.data;
  // 此时主线程的 buffer 已失效，Worker 独享该内存
};

MessageChannel

如果需要双向实时通信，可以使用 MessageChannel，它提供了两个端口，分别连接两端，比单纯的 postMessage 更灵活。

注意事项与最佳实践

1. 资源释放：任务完成后务必调用 terminate()，否则 Worker 会一直驻留内存。
2. 错误处理：Worker 中的异常不会自动抛出到主线程，需要通过 onerror 捕获。
3. 调试难度：Worker 的调试比普通 JS 稍麻烦，建议在浏览器开发者工具的 Sources 面板中单独查看。
4. 避免频繁通信：尽量合并小任务，减少主线程与 Worker 之间的消息往返次数。
5. 兼容性：虽然现代浏览器支持良好，但在极老旧环境中仍需做降级处理。

总结

Web Worker 为 JavaScript 带来了真正的多线程能力。通过合理划分任务，利用消息传递机制和可转移对象优化，我们可以在保证用户体验流畅的同时，充分发挥多核 CPU 的计算潜力。掌握这项技能，对于构建高性能、高响应的现代 Web 应用至关重要。

相关文档

• MDN - Web Workers API
• W3C - Web Workers 规范