Web Worker多线程优化

Web Worker 是浏览器提供的多线程 API，允许在主线程之外运行脚本，避免阻塞 UI 渲染。合理使用 Web Worker 可以显著提升复杂计算的性能，尤其在数据密集型或高延迟任务中效果明显。

Web Worker 的基本原理

浏览器的主线程负责渲染、事件处理和 JavaScript 执行，长时间运行的脚本会导致页面卡顿。Web Worker 通过创建独立线程解决这一问题，线程间通过消息传递通信。Worker 线程无法直接操作 DOM，但可以执行计算密集型任务。

Worker 分为专用 Worker（Dedicated Worker）和共享 Worker（Shared Worker）。专用 Worker 仅能被创建它的脚本使用，而共享 Worker 可被多个脚本共享。以下是一个专用 Worker 的创建示例：

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

worker.postMessage({ type: 'start', data: 10000 });

worker.onmessage = (event) => {
  console.log('Result:', event.data);
};

// worker.js
self.onmessage = (event) => {
  if (event.data.type === 'start') {
    const result = heavyCalculation(event.data.data);
    self.postMessage(result);
  }
};

function heavyCalculation(n) {
  // 模拟耗时计算
  let sum = 0;
  for (let i = 0; i < n; i++) {
    sum += Math.sqrt(i);
  }
  return sum;
}

适用场景分析

Web Worker 最适合处理以下类型的任务：

1. 大数据处理：如 CSV/JSON 解析、图像处理
2. 复杂算法：加密解密、物理模拟
3. 高延迟操作：IndexedDB 大量数据读写
4. 实时计算：音频处理、视频编解码

不适用场景包括需要频繁操作 DOM 或依赖主线程状态的任务。例如，以下情况不适合使用 Worker：

// 错误示例：Worker 无法直接操作 DOM
self.onmessage = (event) => {
  document.getElementById('result').textContent = event.data; // 报错
};

性能优化实践

任务分片策略

将大任务分解为小任务分片执行，避免长时间占用线程：

// 主线程
const worker = new Worker('chunk-worker.js');
const data = prepareHugeData(); // 准备大数据集
const CHUNK_SIZE = 1000;

for (let i = 0; i < data.length; i += CHUNK_SIZE) {
  const chunk = data.slice(i, i + CHUNK_SIZE);
  worker.postMessage({ chunk, index: i });
}

// chunk-worker.js
self.onmessage = (event) => {
  const result = processChunk(event.data.chunk);
  self.postMessage({
    index: event.data.index,
    result
  });
};

线程池管理

创建和销毁 Worker 有开销，使用线程池复用 Worker：

class WorkerPool {
  constructor(size, workerScript) {
    this.pool = [];
    this.queue = [];
    
    for (let i = 0; i < size; i++) {
      const worker = new Worker(workerScript);
      worker.onmessage = (e) => {
        this._onComplete(worker, e.data);
      };
      this.pool.push(worker);
    }
  }

  _onComplete(worker, result) {
    const callback = this.queue.shift();
    callback?.(result);
    
    if (this.queue.length > 0) {
      const nextTask = this.queue[0];
      worker.postMessage(nextTask.data);
    } else {
      this.pool.push(worker);
    }
  }

  postMessage(data) {
    return new Promise((resolve) => {
      if (this.pool.length > 0) {
        const worker = this.pool.pop();
        worker.postMessage(data);
        this.queue.push({ resolve });
      } else {
        this.queue.push({ data, resolve });
      }
    });
  }
}

// 使用示例
const pool = new WorkerPool(4, 'worker.js');
pool.postMessage({ task: 'process' }).then(console.log);

数据传输优化

Worker 通信使用结构化克隆算法，大数据传输会显著影响性能。优化方法包括：

1. 使用 Transferable Objects 转移所有权而非复制：

// 主线程
const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage(buffer, [buffer]); // 转移所有权

// Worker 中
self.onmessage = (e) => {
  const buffer = e.data; // 主线程不再能访问该 buffer
};

2. 共享内存（SharedArrayBuffer）：

// 需要 HTTPS 和 COOP/COEP 头
const sharedBuffer = new SharedArrayBuffer(1024);
const view = new Int32Array(sharedBuffer);

// 主线程和 Worker 都可直接操作同一内存
worker.postMessage({ buffer: sharedBuffer });

// Worker 中使用 Atomics 进行同步
Atomics.add(view, 0, 1);

高级应用模式

流水线处理

将任务分解为多个阶段，每个 Worker 处理特定阶段：

// 主线程
const preProcessWorker = new Worker('pre-process.js');
const mainProcessWorker = new Worker('main-process.js');

preProcessWorker.onmessage = (e) => {
  mainProcessWorker.postMessage(e.data);
};

mainProcessWorker.onmessage = (e) => {
  console.log('Final result:', e.data);
};

// pre-process.js
self.onmessage = (e) => {
  const stage1Result = stage1(e.data);
  self.postMessage(stage1Result);
};

// main-process.js
self.onmessage = (e) => {
  const finalResult = stage2(e.data);
  self.postMessage(finalResult);
};

动态 Worker 加载

根据任务复杂度动态创建 Worker：

function createWorkerOnDemand(taskSize) {
  const workerCount = Math.ceil(taskSize / 500000);
  const workers = [];
  
  for (let i = 0; i < workerCount; i++) {
    workers.push(new Worker('dynamic-worker.js'));
  }
  
  return workers;
}

调试与错误处理

Worker 中错误不会自动显示在主线程控制台，需要显式监听：

worker.onerror = (e) => {
  console.error('Worker error:', e.message);
  e.preventDefault(); // 阻止默认错误打印
};

// Worker 内部捕获错误
self.onmessage = async (e) => {
  try {
    const result = await riskyOperation(e.data);
    self.postMessage(result);
  } catch (err) {
    self.postMessage({ error: err.message });
  }
};

使用 performance API 测量 Worker 性能：

// 主线程
performance.mark('worker-start');
worker.postMessage(data);

worker.onmessage = (e) => {
  performance.mark('worker-end');
  performance.measure('worker-duration', 'worker-start', 'worker-end');
  console.log(performance.getEntriesByName('worker-duration'));
};

浏览器兼容性考量

虽然现代浏览器普遍支持 Web Worker，但仍需注意：

1. IE10 及以下不支持
2. 某些移动浏览器有线程限制
3. Service Worker 与 Web Worker 是不同的规范

特性检测方案：

if (window.Worker) {
  // 支持 Web Worker
} else {
  // 降级方案
  console.warn('Web Workers not supported, falling back to main thread');
}

实际案例：图像处理

以下是将图像滤镜应用移入 Worker 的完整示例：

// 主线程
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

const worker = new Worker('image-worker.js');
worker.postMessage(
  { pixels: imageData.data.buffer, width: imageData.width },
  [imageData.data.buffer] // 转移 ArrayBuffer
);

worker.onmessage = (e) => {
  const processedPixels = new Uint8ClampedArray(e.data.pixels);
  const newImageData = new ImageData(
    processedPixels,
    e.data.width
  );
  ctx.putImageData(newImageData, 0, 0);
};

// image-worker.js
self.onmessage = (e) => {
  const pixels = new Uint8ClampedArray(e.data.pixels);
  const width = e.data.width;
  
  // 应用滤镜（示例：反色处理）
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255 - pixels[i];     // R
    pixels[i+1] = 255 - pixels[i+1]; // G
    pixels[i+2] = 255 - pixels[i+2]; // B
  }
  
  self.postMessage(
    { pixels: pixels.buffer, width },
    [pixels.buffer] // 转移回主线程
  );
};