Web Workers 入门指南

Web Workers 允许在独立的线程中运行 JavaScript 代码，不会阻塞主线程的 UI 渲染。

创建 Web Worker

// worker.js
self.onmessage = function(e) {
  const result = e.data * 2;
  postMessage(result);
};

使用 Web Worker

// 主线程
const worker = new Worker('worker.js');

worker.onmessage = function(e) {
  console.log('收到结果:', e.data);
};

worker.postMessage(10); // 发送消息

实际应用示例

计算密集型任务

// heavy-task.js
self.onmessage = function(e) {
  const { start, end } = e.data;
  let sum = 0;
  for (let i = start; i <= end; i++) {
    sum += i;
  }
  postMessage(sum);
};

// 主线程使用
const worker = new Worker('heavy-task.js');

worker.onmessage = function(e) {
  console.log('计算结果:', e.data);
  worker.terminate(); // 终止 worker
};

worker.postMessage({ start: 1, end: 1000000 });

终止 Worker

worker.terminate();

错误处理

worker.onerror = function(e) {
  console.error('Worker 错误:', e.message);
};

限制

• 不能直接操作 DOM
• 不能使用 window/document 对象
• 只能访问部分 Web API（如 XMLHttpRequest、fetch）

更多详情请参考 MDN Web Workers