What are the differences between Web Worker and WebAssembly, and how to choose? - 面试题

Web Worker and WebAssembly (WASM) can both be used to improve Web application performance, but they solve different problems and have different use cases.

Comparison of Web Worker and WebAssembly

Web Worker Characteristics

Advantages:

Runs JavaScript code in independent threads
Doesn't block the main thread, keeping UI responsive
Can access some browser APIs (such as fetch, IndexedDB)
Easy to use, seamlessly integrates with existing JavaScript code
Suitable for I/O-intensive tasks

Limitations:

Still JavaScript, performance limited by JS engine
Cannot directly access DOM
Message passing has overhead
Doesn't support synchronous operations

WebAssembly Characteristics

Advantages:

Near-native code execution speed
Supports compilation from multiple languages (C/C++, Rust, Go, etc.)
Binary format, small size, fast loading
Can interoperate with JavaScript
Suitable for compute-intensive tasks

Limitations:

Requires compilation step
Doesn't directly access browser APIs
Relatively difficult to debug
Not suitable for I/O-intensive tasks

Use Case Comparison

Web Worker Use Cases

javascript
// 1. Big data processing
const worker = new Worker('data-worker.js');
worker.postMessage(largeDataSet);

// 2. Complex DOM operations (through message passing)
worker.postMessage({ type: 'calculateLayout', data });

// 3. Network requests and data processing
worker.postMessage({ type: 'fetch', url: '/api/data' });

// 4. Scheduled tasks and background processing
worker.postMessage({ type: 'schedule', interval: 1000 });

WebAssembly Use Cases

javascript
// 1. Complex mathematical calculations
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('compute.wasm')
);
const result = wasmModule.instance.exports.complexCalculation(data);

// 2. Image/video processing
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('image-processor.wasm')
);
const processedImage = wasmModule.instance.exports.processImage(imageData);

// 3. Game/3D rendering
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('game-engine.wasm')
);
wasmModule.instance.exports.renderFrame(frameData);

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

Combining Web Worker and WebAssembly

Loading WebAssembly in Web Worker

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

worker.onmessage = function(e) {
  if (e.data.type === 'ready') {
    // WASM loaded, can send compute tasks
    worker.postMessage({ action: 'compute', data: largeData });
  } else if (e.data.type === 'result') {
    console.log('Computation result:', e.data.result);
  }
};

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

self.onmessage = async function(e) {
  if (e.data.action === 'init') {
    // Load WASM in Worker
    wasmModule = await WebAssembly.instantiateStreaming(
      fetch(e.data.wasmUrl)
    );
    self.postMessage({ type: 'ready' });
  } else if (e.data.action === 'compute') {
    // Use WASM for computation
    const result = wasmModule.instance.exports.compute(e.data.data);
    self.postMessage({ type: 'result', result });
  }
};

Practical Application Example: Image Processing

javascript
// Main thread
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]);

// Load image
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');
    
    // Load WASM module
    wasmModule = await WebAssembly.instantiateStreaming(
      fetch(e.data.wasmUrl)
    );
    
    self.postMessage({ type: 'ready' });
  } else if (e.data.action === 'process') {
    // Use WASM to process image
    const imageData = e.data.imageData;
    const processedData = wasmModule.instance.exports.processImage(
      imageData.data,
      imageData.width,
      imageData.height
    );
    
    // Put processed data back to Canvas
    const newImageData = new ImageData(
      new Uint8ClampedArray(processedData),
      imageData.width,
      imageData.height
    );
    ctx.putImageData(newImageData, 0, 0);
  }
};

Performance Comparison

Compute-Intensive Tasks

javascript
// Web Worker version
// 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 version
// C++ code compiled to 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;
  }
}

// Performance test results (example)
// Web Worker: ~500ms
// WebAssembly: ~50ms (10x performance improvement)

I/O-Intensive Tasks

javascript
// Web Worker version (suitable)
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 version (unsuitable)
// WASM cannot directly access fetch API
// Needs JavaScript bridge, increases complexity

Selection Recommendations

Choose Web Worker when:

Need to keep UI responsive: Long-running tasks
I/O-intensive tasks: Network requests, file operations
Need to access browser APIs: fetch, IndexedDB, WebSocket
Existing JavaScript code: Easy to migrate and integrate
Multi-threaded parallel processing: Can create multiple Workers working in parallel

javascript
// Example: Process multiple files in parallel
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);
});

Choose WebAssembly when:

Compute-intensive tasks: Mathematical operations, image processing, encryption
Need ultimate performance: Game engines, 3D rendering, physics simulation
Existing C/C++/Rust code: Can reuse existing codebases
Need precise memory control: Manual memory management
Need to reduce bundle size: Binary format is smaller

javascript
// Example: High-performance computing
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('high-performance-compute.wasm')
);

// Call WASM function
const result = wasmModule.instance.exports.compute(largeData);

Choose Web Worker + WebAssembly when:

Need high-performance computing without blocking UI: Run WASM in Worker
Complex multi-step processing: Worker handles I/O, WASM handles computation
Need to parallel process multiple compute tasks: Multiple Workers each running WASM

javascript
// Example: High-performance parallel processing
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);
});

Best Practices

Performance Analysis: Use performance analysis tools to identify bottlenecks
Progressive Optimization: Optimize algorithms first, then consider using WASM
Reasonable Selection: Choose appropriate technology based on task type
Combine Use: Use WASM in Worker for best performance
Test and Verify: Compare performance of different solutions
Consider Compatibility: Check browser support for WASM