一、架构设计

基于Web Workers的多线程数据处理方案，将主线程解放出来，大数据处理性能提升5-10倍

二、核心实现

// worker-manager.js
class WorkerManager {
  constructor(workerScript) {
    this.worker = new Worker(workerScript);
    this.callbacks = new Map();
    this.taskId = 0;

    this.worker.onmessage = (e) => {
      const { taskId, result, error } = e.data;
      const callback = this.callbacks.get(taskId);
      
      if (callback) {
        if (error) callback.reject(error);
        else callback.resolve(result);
        this.callbacks.delete(taskId);
      }
    };
  }

  execute(data, transferables = []) {
    return new Promise((resolve, reject) => {
      const taskId = ++this.taskId;
      this.callbacks.set(taskId, { resolve, reject });
      this.worker.postMessage({ taskId, data }, transferables);
    });
  }

  terminate() {
    this.worker.terminate();
  }
}

// 使用示例
const worker = new WorkerManager('data-processor.js');
worker.execute(largeDataSet)
  .then(result => console.log('处理完成', result));

// data-processor.js (Worker线程)
self.onmessage = function(e) {
  const { taskId, data } = e.data;
  
  try {
    // 大数据分片处理
    const chunkSize = 10000;
    const chunks = [];
    
    for (let i = 0; i  transformData(item));
}

三、高级特性

// 使用SharedArrayBuffer实现零拷贝
const worker = new Worker('image-processor.js');
const imageData = new Uint8Array(new SharedArrayBuffer(1024 * 1024));

// 填充图像数据...

worker.postMessage(
  { imageData }, 
  [imageData.buffer] // 转移所有权
);

// Worker中直接操作共享内存
self.onmessage = function(e) {
  const { imageData } = e.data;
  // 直接处理imageData，无需复制
};

class WorkerPool {
  constructor(size, workerScript) {
    this.pool = Array(size).fill().map(() => ({
      worker: new Worker(workerScript),
      busy: false
    }));
    this.queue = [];
  }

  execute(data) {
    return new Promise((resolve) => {
      const task = { data, resolve };
      this.queue.push(task);
      this.processNext();
    });
  }

  processNext() {
    const availableWorker = this.pool.find(w => !w.busy);
    if (!availableWorker || !this.queue.length) return;

    const { worker } = availableWorker;
    const { data, resolve } = this.queue.shift();
    availableWorker.busy = true;

    worker.onmessage = (e) => {
      resolve(e.data.result);
      availableWorker.busy = false;
      this.processNext();
    };

    worker.postMessage({ data });
  }
}

// 使用4个Worker的线程池
const pool = new WorkerPool(4, 'worker.js');

四、完整案例

// 主线程代码
const imageWorker = new WorkerManager('image-worker.js');
const processBtn = document.getElementById('processBtn');

processBtn.addEventListener('click', async () => {
    const file = imageInput.files[0];
    const filter = filterSelect.value;
    
    const imageBitmap = await createImageBitmap(file);
    const canvas = document.createElement('canvas');
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(imageBitmap, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    // 使用Worker处理
    const processed = await imageWorker.execute({
        filter,
        imageData: imageData.data.buffer,
        width: imageBitmap.width,
        height: imageBitmap.height
    }, [imageData.data.buffer]);
    
    // 显示结果
    const resultCtx = resultContainer.querySelector('canvas').getContext('2d');
    resultCtx.putImageData(new ImageData(
        new Uint8ClampedArray(processed.data),
        processed.width,
        processed.height
    ), 0, 0);
});