Web Worker 多线程编程详解与实战

// 监听主线程消息
self.onmessage = (event) => {
  console.log('From main:', event.data);
  // 执行耗时任务
  const result = heavyCalculation();
  // 返回结果
  self.postMessage(result);
};

function heavyCalculation() {
  // 模拟复杂计算
  return Array.from({ length: 1000 }, (_, i) => i * 2);
}

适用场景

• 大规模数据计算/排序
• 图像/视频处理（配合 Canvas、WebGL）
• 实时数据分析（如日志处理）
• 预加载和缓存管理
• 非阻塞的轮询任务

限制与注意事项

1. 同源策略：Worker 脚本必须与主页面同源。
2. 文件协议限制：本地文件（file://）可能受限，建议通过本地服务器测试。
3. 全局对象：Worker 内使用 self 或 this 代替 window。
4. 模块化支持：可通过 new Worker('worker.js', { type: 'module' }) 使用 ES6 模块。
5. 资源限制：可创建多个 Worker，但过多会消耗系统资源。

终止 Worker

// 主线程中终止
worker.terminate();

// Worker 内部自终止
self.close();

通过合理使用 Web Workers，可以显著提升复杂 Web 应用的性能表现，尤其是在大量计算或高频率任务处理场景中。

Web Worker 实际应用场景

1. 大数据处理与分析

// 处理大型数据集（10 万 + 行数据）
// worker.js
self.onmessage = function(e) {
  const data = e.data;
  const results = [];
  // 复杂数据转换
  data.forEach(item => {
    const processed = {
      ...item,
      score: calculateScore(item),
      trend: analyzeTrend(item.history)
    };
    results.push(processed);
  });
  // 分批返回结果，避免内存压力
  for (let i = 0; i < results.length; i += 1000) {
    self.postMessage({
      type: 'progress',
      data: results.slice(i, i + 1000),
      progress: ((i / results.length * 100).toFixed(1))
    });
  }
  self.postMessage({ type: 'complete' });
};

2. 图像处理与滤镜

// 实时图片滤镜应用
// image-worker.js
self.onmessage = async function(e) {
  const { imageData, filterType, width, height } = e.data;
  switch (filterType) {
    case 'grayscale':
      applyGrayscale(imageData.data);
      break;
    case 'blur':
      applyGaussianBlur(imageData.data, width, height);
      break;
    case 'edgeDetection':
      applySobelOperator(imageData.data, width, height);
      break;
  }
  self.postMessage({ imageData });
};

function applyGrayscale(pixels) {
  for (let i = 0; i < pixels.length; i += 4) {
    const avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
    pixels[i] = pixels[i + 1] = pixels[i + 2] = avg;
  }
}

3. 实时数据流处理

// 处理 WebSocket 实时数据流
// stream-worker.js
let websocket = null;
let buffer = [];

self.onmessage = function(e) {
  const { type, data } = e.data;
  if (type === 'connect') {
    // 在 Worker 中建立 WebSocket 连接
    websocket = new WebSocket(data.url);
    websocket.onmessage = handleWebSocketMessage;
  } else if (type === 'process') {
    // 处理接收的数据
    const processed = data.map(processTradeData);
    buffer.push(...processed);
    // 批量处理，每 100 条发送一次
    if (buffer.length >= 100) {
      self.postMessage({ trades: buffer.slice(0, 100) });
      buffer = buffer.slice(100);
    }
  }
};

4. Excel/CSV 文件解析

// 解析大型 Excel 文件
// excel-worker.js
importScripts('https://unpkg.com/xlsx/dist/xlsx.full.min.js');

self.onmessage = function(e) {
  const { file, options } = e.data;
  const reader = new FileReader();
  reader.onload = function(event) {
    const data = new Uint8Array(event.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    // 分片处理每个 sheet
    workbook.SheetNames.forEach(sheetName => {
      const worksheet = workbook.Sheets[sheetName];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { raw: false, defval: '' });
      // 分批发送回主线程
      const chunkSize = 1000;
      for (let i = 0; i < jsonData.length; i += chunkSize) {
        const chunk = jsonData.slice(i, i + chunkSize);
        self.postMessage({
          type: 'chunk',
          sheet: sheetName,
          data: chunk,
          progress: (i / jsonData.length * 100)
        });
      }
    });
    self.postMessage({ type: 'complete' });
  };
  reader.readAsArrayBuffer(file);
};

5. 复杂算法计算

// 机器学习推理（使用 TensorFlow.js）
// ml-worker.js
importScripts('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest');

let model = null;

self.onmessage = async function(e) {
  const { action, data } = e.data;
  if (action === 'loadModel') {
    // 加载模型
    model = await tf.loadLayersModel(data.modelUrl);
    self.postMessage({ status: 'model_loaded' });
  } else if (action === 'predict') {
    // 批量预测
    const inputs = tf.tensor(data);
    const predictions = model.predict(inputs);
    const results = await predictions.array();
    // 清理内存
    inputs.dispose();
    predictions.dispose();
    self.postMessage({ predictions: results });
  } else if (action === 'train') {
    // 在后台训练模型
    await trainModel(data);
    self.postMessage({ status: 'training_complete' });
  }
};

6. 音视频处理

// 音频频谱分析
// audio-worker.js
let audioContext = null;
let analyser = null;
let dataArray = null;

self.onmessage = function(e) {
  const { type, audioBuffer, sampleRate } = e.data;
  if (type === 'init') {
    audioContext = new (self.AudioContext || self.webkitAudioContext)();
    analyser = audioContext.createAnalyser();
    analyser.fftSize = 2048;
    dataArray = new Uint8Array(analyser.frequencyBinCount);
  } else if (type === 'analyze') {
    // 实时分析音频
    const source = audioContext.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(analyser);
    source.start();
    // 定期获取频谱数据
    const interval = setInterval(() => {
      analyser.getByteFrequencyData(dataArray);
      self.postMessage({
        frequencies: Array.from(dataArray),
        timestamp: Date.now()
      });
    }, 50);
    source.onended = () => {
      clearInterval(interval);
      self.postMessage({ status: 'ended' });
    };
  }
};

7. 游戏物理引擎

// 游戏物理计算
// physics-worker.js
class PhysicsWorld {
  constructor() {
    this.objects = [];
    this.gravity = 9.8;
  }

  update(deltaTime) {
    // 并行更新所有物体
    for (const obj of this.objects) {
      this.applyPhysics(obj, deltaTime);
    }
    // 碰撞检测
    this.checkCollisions();
    return this.objects.map(obj => ({
      id: obj.id,
      position: obj.position,
      velocity: obj.velocity
    }));
  }

  applyPhysics(obj, deltaTime) {
    // 计算物理效果
    obj.velocity.y -= this.gravity * deltaTime;
    obj.position.x += obj.velocity.x * deltaTime;
    obj.position.y += obj.velocity.y * deltaTime;
    // 边界检测
    if (obj.position.y < 0) {
      obj.position.y = 0;
      obj.velocity.y *= -0.8; // 弹性
    }
  }
}

let world = new PhysicsWorld();

self.onmessage = function(e) {
  const { action, data, deltaTime } = e.data;
  if (action === 'update') {
    const updates = world.update(deltaTime);
    self.postMessage({ type: 'physics_update', data: updates });
  }
};

8. 地图/地理数据处理

// 处理 GeoJSON 地图数据
// map-worker.js
self.onmessage = function(e) {
  const { geojson, bounds, zoom } = e.data;
  // 筛选视口内的要素
  const visibleFeatures = geojson.features.filter(feature => {
    return isInBounds(feature.geometry, bounds);
  });
  // 生成简化几何体（根据缩放级别）
  const simplified = simplifyGeometry(visibleFeatures, zoom);
  // 生成空间索引
  const spatialIndex = createRTree(simplified);
  self.postMessage({ features: simplified, spatialIndex, bounds });
};

9. 批量文件处理

// 批量图片压缩
// compress-worker.js
importScripts('https://cdn.jsdelivr.net/npm/jimp@latest/browser/lib/jimp.min.js');

self.onmessage = async function(e) {
  const { images, quality, maxWidth } = e.data;
  const results = [];
  for (let i = 0; i < images.length; i++) {
    const image = images[i];
    // 使用 JIMP 库处理图片
    const jimpImage = await self.Jimp.read(image.data);
    if (maxWidth) {
      jimpImage.resize(maxWidth, self.Jimp.AUTO);
    }
    jimpImage.quality(quality);
    // 转换为 Blob
    const buffer = await jimpImage.getBufferAsync(self.Jimp.MIME_JPEG);
    const compressed = new Blob([buffer], { type: 'image/jpeg' });
    results.push({
      name: image.name,
      originalSize: image.size,
      compressedSize: compressed.size,
      data: compressed
    });
    // 进度更新
    self.postMessage({
      type: 'progress',
      current: i + 1,
      total: images.length
    });
  }
  self.postMessage({ type: 'complete', results });
};

10. 实时监控仪表盘

// 处理实时监控数据
// monitoring-worker.js
class DataAggregator {
  constructor() {
    this.metrics = new Map();
    this.windowSize = 60000; // 1 分钟窗口
  }

  addMetric(metric) {
    const now = Date.now();
    const key = metric.name;
    if (!this.metrics.has(key)) {
      this.metrics.set(key, []);
    }
    const values = this.metrics.get(key);
    values.push({ timestamp: now, value: metric.value });
    // 清理旧数据
    const cutoff = now - this.windowSize;
    this.metrics.set(key, values.filter(v => v.timestamp > cutoff));
  }

  getAggregates() {
    const aggregates = {};
    for (const [key, values] of this.metrics) {
      if (values.length === 0) continue;
      const nums = values.map(v => v.value);
      aggregates[key] = {
        avg: nums.reduce((a, b) => a + b) / nums.length,
        min: Math.min(...nums),
        max: Math.max(...nums),
        latest: values[values.length - 1].value,
        count: nums.length
      };
    }
    return aggregates;
  }
}

const aggregator = new DataAggregator();

// 定时生成聚合数据
setInterval(() => {
  const aggregates = aggregator.getAggregates();
  self.postMessage({
    type: 'aggregates',
    data: aggregates,
    timestamp: Date.now()
  });
}, 1000);

self.onmessage = function(e) {
  if (e.data.type === 'metric') {
    aggregator.addMetric(e.data.metric);
  }
};

优化技巧

1. 批量处理与分片

// 分片处理大数据
function processInChunks(data, chunkSize, processFn) {
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    const result = processFn(chunk);
    // 允许主线程处理 UI
    if (i % (chunkSize * 10) === 0) {
      setTimeout(() => {}, 0);
    }
    self.postMessage({ chunk: result, index: i });
  }
}

2. Transferable Objects 优化

// 使用可转移对象避免复制
const largeBuffer = new ArrayBuffer(1024 * 1024 * 100); // 100MB
const view = new Uint8Array(largeBuffer);
// 填充数据
for (let i = 0; i < view.length; i++) {
  view[i] = i % 256;
}
// 转移所有权而不是复制
self.postMessage({ buffer: largeBuffer }, [largeBuffer]);

3. Worker 池管理

class WorkerPool {
  constructor(workerScript, poolSize = 4) {
    this.workers = [];
    this.queue = [];
    for (let i = 0; i < poolSize; i++) {
      const worker = new Worker(workerScript);
      worker.onmessage = this.handleResult.bind(this, worker);
      this.workers.push({ worker, busy: false });
    }
  }

  execute(task) {
    const available = this.workers.find(w => !w.busy);
    if (available) {
      available.busy = true;
      available.worker.postMessage(task);
    } else {
      this.queue.push(task);
    }
  }
}

这些实际应用展示了 Web Worker 在各种场景下的强大能力，特别是处理 CPU 密集型任务时，能显著提升 Web 应用性能。