Web Worker 和 WebAssembly 有什么区别，如何选择？ - 面试题

Web Worker 和 WebAssembly (WASM) 都可以用于提升 Web 应用的性能，但它们解决的问题和适用场景有所不同。

Web Worker 和 WebAssembly 的对比

Web Worker 的特点

优势：

在独立线程中运行 JavaScript 代码
不阻塞主线程，保持 UI 响应
可以访问部分浏览器 API（如 fetch、IndexedDB）
易于使用，与现有 JavaScript 代码无缝集成
适合处理 I/O 密集型任务

限制：

仍然是 JavaScript，性能受限于 JS 引擎
无法直接访问 DOM
消息传递有开销
不支持同步操作

WebAssembly 的特点

优势：

接近原生代码的执行速度
支持多种语言编译（C/C++、Rust、Go 等）
二进制格式，体积小，加载快
可以与 JavaScript 互操作
适合计算密集型任务

限制：

需要编译步骤
不直接访问浏览器 API
调试相对困难
不适合 I/O 密集型任务

使用场景对比

Web Worker 适用场景

javascript
// 1. 大数据处理
const worker = new Worker('data-worker.js');
worker.postMessage(largeDataSet);

// 2. 复杂的 DOM 操作（通过消息传递）
worker.postMessage({ type: 'calculateLayout', data });

// 3. 网络请求和数据处理
worker.postMessage({ type: 'fetch', url: '/api/data' });

// 4. 定时任务和后台处理
worker.postMessage({ type: 'schedule', interval: 1000 });

WebAssembly 适用场景

javascript
// 1. 复杂的数学计算
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('compute.wasm')
);
const result = wasmModule.instance.exports.complexCalculation(data);

// 2. 图像/视频处理
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('image-processor.wasm')
);
const processedImage = wasmModule.instance.exports.processImage(imageData);

// 3. 游戏/3D 渲染
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('game-engine.wasm')
);
wasmModule.instance.exports.renderFrame(frameData);

// 4. 加密/解密
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('crypto.wasm')
);
const encrypted = wasmModule.instance.exports.encrypt(data, key);

结合使用 Web Worker 和 WebAssembly

在 Web Worker 中加载 WebAssembly

javascript
// 主线程
const worker = new Worker('wasm-worker.js');
worker.postMessage({ action: 'init', wasmUrl: 'compute.wasm' });

worker.onmessage = function(e) {
  if (e.data.type === 'ready') {
    // WASM 已加载，可以发送计算任务
    worker.postMessage({ action: 'compute', data: largeData });
  } else if (e.data.type === 'result') {
    console.log('计算结果:', e.data.result);
  }
};

// wasm-worker.js
let wasmModule = null;

self.onmessage = async function(e) {
  if (e.data.action === 'init') {
    // 在 Worker 中加载 WASM
    wasmModule = await WebAssembly.instantiateStreaming(
      fetch(e.data.wasmUrl)
    );
    self.postMessage({ type: 'ready' });
  } else if (e.data.action === 'compute') {
    // 使用 WASM 进行计算
    const result = wasmModule.instance.exports.compute(e.data.data);
    self.postMessage({ type: 'result', result });
  }
};

实际应用示例：图像处理

javascript
// 主线程
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const offscreen = canvas.transferControlToOffscreen();

const worker = new Worker('image-processor-worker.js');
worker.postMessage({ 
  action: 'init', 
  canvas: offscreen, 
  wasmUrl: 'image-processor.wasm' 
}, [offscreen]);

// 加载图像
const img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  worker.postMessage({ action: 'process', imageData });
};
img.src = 'image.jpg';

// image-processor-worker.js
let wasmModule = null;
let canvas = null;
let ctx = null;

self.onmessage = async function(e) {
  if (e.data.action === 'init') {
    canvas = e.data.canvas;
    ctx = canvas.getContext('2d');
    
    // 加载 WASM 模块
    wasmModule = await WebAssembly.instantiateStreaming(
      fetch(e.data.wasmUrl)
    );
    
    self.postMessage({ type: 'ready' });
  } else if (e.data.action === 'process') {
    // 使用 WASM 处理图像
    const imageData = e.data.imageData;
    const processedData = wasmModule.instance.exports.processImage(
      imageData.data,
      imageData.width,
      imageData.height
    );
    
    // 将处理后的数据放回 Canvas
    const newImageData = new ImageData(
      new Uint8ClampedArray(processedData),
      imageData.width,
      imageData.height
    );
    ctx.putImageData(newImageData, 0, 0);
  }
};

性能对比

计算密集型任务

javascript
// Web Worker 版本
// worker.js
self.onmessage = function(e) {
  const data = e.data;
  let result = 0;
  
  for (let i = 0; i < data.length; i++) {
    result += Math.sqrt(data[i]);
  }
  
  self.postMessage(result);
};

// WebAssembly 版本
// C++ 代码编译成 WASM
extern "C" {
  double compute(double* data, int length) {
    double result = 0;
    for (int i = 0; i < length; i++) {
      result += sqrt(data[i]);
    }
    return result;
  }
}

// 性能测试结果（示例）
// Web Worker: ~500ms
// WebAssembly: ~50ms（10倍性能提升）

I/O 密集型任务

javascript
// Web Worker 版本（适合）
self.onmessage = async function(e) {
  const urls = e.data.urls;
  const results = [];
  
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    results.push(data);
  }
  
  self.postMessage(results);
};

// WebAssembly 版本（不适合）
// WASM 无法直接访问 fetch API
// 需要通过 JavaScript 桥接，增加复杂度

选择建议

选择 Web Worker 当：

需要保持 UI 响应：长时间运行的任务
I/O 密集型任务：网络请求、文件操作
需要访问浏览器 API：fetch、IndexedDB、WebSocket
现有 JavaScript 代码：易于迁移和集成
多线程并行处理：可以创建多个 Worker 并行工作

javascript
// 示例：并行处理多个文件
const workers = [];
const files = ['file1.txt', 'file2.txt', 'file3.txt'];

files.forEach(file => {
  const worker = new Worker('file-processor.js');
  worker.postMessage({ file });
  workers.push(worker);
});

选择 WebAssembly 当：

计算密集型任务：数学运算、图像处理、加密
需要极致性能：游戏引擎、3D 渲染、物理模拟
现有 C/C++/Rust 代码：可以复用现有代码库
需要精确控制内存：手动内存管理
需要减少包体积：二进制格式更小

javascript
// 示例：高性能计算
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('high-performance-compute.wasm')
);

// 调用 WASM 函数
const result = wasmModule.instance.exports.compute(largeData);

结合使用 Web Worker + WebAssembly 当：

需要高性能计算且不阻塞 UI：在 Worker 中运行 WASM
复杂的多步骤处理：Worker 处理 I/O，WASM 处理计算
需要并行处理多个计算任务：多个 Worker 各自运行 WASM

javascript
// 示例：高性能并行处理
const workers = [];
const tasks = [data1, data2, data3, data4];

tasks.forEach((task, index) => {
  const worker = new Worker('wasm-worker.js');
  worker.postMessage({ 
    action: 'compute', 
    data: task,
    wasmUrl: 'compute.wasm'
  });
  workers.push(worker);
});

最佳实践

性能分析：使用性能分析工具确定瓶颈
渐进式优化：先优化算法，再考虑使用 WASM
合理选择：根据任务类型选择合适的技术
结合使用：在 Worker 中使用 WASM 获得最佳性能
测试验证：对比不同方案的性能表现
考虑兼容性：检查浏览器对 WASM 的支持情况