如何优化 Web Worker 的性能？

Web Worker 的性能优化是确保应用高效运行的关键。以下是多个方面的优化策略。

1. Worker 创建和销毁优化

复用 Worker 实例

javascript
// ❌ 频繁创建和销毁（性能差）
function processTask(data) {
  const worker = new Worker('worker.js');
  worker.postMessage(data);
  worker.onmessage = function(e) {
    console.log(e.data);
    worker.terminate();
  };
}

// ✅ 复用 Worker（性能好）
const worker = new Worker('worker.js');
const pendingTasks = [];

function processTask(data) {
  return new Promise((resolve) => {
    const taskId = Date.now();
    pendingTasks[taskId] = resolve;
    worker.postMessage({ taskId, data });
  });
}

worker.onmessage = function(e) {
  const { taskId, result } = e.data;
  if (pendingTasks[taskId]) {
    pendingTasks[taskId](result);
    delete pendingTasks[taskId];
  }
};

Worker 池模式

javascript
class WorkerPool {
  constructor(workerPath, poolSize = 4) {
    this.workerPath = workerPath;
    this.poolSize = poolSize;
    this.workers = [];
    this.taskQueue = [];
    this.init();
  }

  init() {
    for (let i = 0; i < this.poolSize; i++) {
      const worker = new Worker(this.workerPath);
      worker.onmessage = (e) => this.handleMessage(e, worker);
      this.workers.push({ worker, busy: false });
    }
  }

  execute(data) {
    return new Promise((resolve) => {
      const availableWorker = this.workers.find(w => !w.busy);
      
      if (availableWorker) {
        availableWorker.busy = true;
        availableWorker.worker.postMessage({ data, resolve });
      } else {
        this.taskQueue.push({ data, resolve });
      }
    });
  }

  handleMessage(event, workerObj) {
    const { result } = event.data;
    const pendingTask = workerObj.worker.pendingTask;
    
    if (pendingTask) {
      pendingTask.resolve(result);
      workerObj.worker.pendingTask = null;
    }
    
    workerObj.busy = false;
    
    if (this.taskQueue.length > 0) {
      const nextTask = this.taskQueue.shift();
      workerObj.busy = true;
      workerObj.worker.pendingTask = nextTask;
      workerObj.worker.postMessage({ data: nextTask.data });
    }
  }
}

// 使用 Worker 池
const pool = new WorkerPool('worker.js', 4);
pool.execute(largeData).then(result => console.log(result));

2. 消息传递优化

使用 Transferable Objects

javascript
// ❌ 深拷贝（性能差）
const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage({ buffer }); // 拷贝 1MB 数据

// ✅ 转移所有权（性能好）
const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage({ buffer }, [buffer]); // 零拷贝
// buffer 现在为空，所有权已转移

批量处理消息

javascript
// ❌ 频繁发送小消息
for (let i = 0; i < 10000; i++) {
  worker.postMessage({ index: i, value: data[i] });
}

// ✅ 批量发送
worker.postMessage({ data: data.slice(0, 10000) });

使用 SharedArrayBuffer（需要特定头部）

javascript
// 需要服务器设置 COOP/COEP 头部
// Cross-Origin-Opener-Policy: same-origin
// Cross-Origin-Embedder-Policy: require-corp

const sharedBuffer = new SharedArrayBuffer(1024);
const sharedArray = new Int32Array(sharedBuffer);

worker.postMessage({ sharedBuffer }, [sharedBuffer]);

// 主线程和 Worker 可以同时访问 sharedArray
sharedArray[0] = 42;

3. 数据处理优化

分块处理大数据

javascript
// worker.js
self.onmessage = function(e) {
  const { data, chunkSize } = e.data;
  const results = [];
  
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    const result = processChunk(chunk);
    results.push(result);
    
    // 定期报告进度
    if (i % (chunkSize * 10) === 0) {
      self.postMessage({ type: 'progress', progress: i / data.length });
    }
  }
  
  self.postMessage({ type: 'complete', results });
};

使用 WebAssembly 加速计算

javascript
// worker.js
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('compute.wasm')
);

self.onmessage = function(e) {
  const { data } = e.data;
  const result = wasmModule.instance.exports.compute(data);
  self.postMessage(result);
};

4. 内存管理优化

及时释放资源

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

// 使用完毕后终止 Worker
worker.terminate();

// Worker 内部
self.onmessage = function(e) {
  const result = process(e.data);
  self.postMessage(result);
  
  // 清理大对象
  e.data = null;
};

避免内存泄漏

javascript
// ❌ 可能导致内存泄漏
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
  // 闭包引用大对象
  const largeData = e.data;
  setTimeout(() => {
    console.log(largeData);
  }, 10000);
};

// ✅ 及时释放引用
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
  const result = process(e.data);
  console.log(result);
  e.data = null; // 释放引用
};

5. 错误处理和监控

错误处理

javascript
const worker = new Worker('worker.js');

worker.onerror = function(event) {
  console.error('Worker error:', event.message);
  console.error('Line:', event.lineno);
  console.error('File:', event.filename);
  
  // 根据错误类型决定是否重启 Worker
  if (isRecoverable(event.error)) {
    restartWorker();
  }
};

worker.onmessageerror = function(event) {
  console.error('Message error:', event.data);
};

性能监控

javascript
class WorkerMonitor {
  constructor(worker) {
    this.worker = worker;
    this.messageCount = 0;
    this.totalTime = 0;
    this.startTime = null;
    
    this.setupMonitoring();
  }
  
  setupMonitoring() {
    this.worker.onmessage = (e) => {
      if (this.startTime) {
        const duration = performance.now() - this.startTime;
        this.totalTime += duration;
        this.messageCount++;
        
        console.log(`Message ${this.messageCount}: ${duration.toFixed(2)}ms`);
        console.log(`Average: ${(this.totalTime / this.messageCount).toFixed(2)}ms`);
      }
    };
  }
  
  sendMessage(data) {
    this.startTime = performance.now();
    this.worker.postMessage(data);
  }
  
  getStats() {
    return {
      messageCount: this.messageCount,
      totalTime: this.totalTime,
      averageTime: this.messageCount > 0 ? this.totalTime / this.messageCount : 0
    };
  }
}

// 使用监控
const monitor = new WorkerMonitor(worker);
monitor.sendMessage(data);

6. 调试技巧

使用 console.log

javascript
// worker.js
self.onmessage = function(e) {
  console.log('[Worker] Received:', e.data);
  const result = process(e.data);
  console.log('[Worker] Result:', result);
  self.postMessage(result);
};

使用 Chrome DevTools

1. 打开 Chrome DevTools
2. 切换到 "Sources" 面板
3. 在左侧找到 Worker 脚本
4. 设置断点进行调试

使用 postMessage 调试

javascript
// 主线程
worker.postMessage({ type: 'debug', data: { key: 'value' } });

// Worker
self.onmessage = function(e) {
  if (e.data.type === 'debug') {
    console.log('[Worker Debug]', e.data.data);
  }
};

最佳实践总结

1. 复用 Worker：避免频繁创建和销毁
2. 使用 Worker 池：管理多个 Worker 实例
3. Transferable Objects：大数据使用转移而非拷贝
4. 批量处理：减少消息传递次数
5. 分块处理：大数据分块处理，定期报告进度
6. 及时释放资源：使用完毕后终止 Worker
7. 错误处理：添加完善的错误处理机制
8. 性能监控：监控 Worker 性能指标
9. WebAssembly：计算密集型任务使用 WASM
10. SharedArrayBuffer：需要共享内存时使用（注意安全限制）