Web Worker multithreading optimization

Web Worker is a multithreading API provided by browsers, allowing scripts to run outside the main thread to avoid blocking UI rendering. Proper use of Web Workers can significantly improve the performance of complex computations, especially in data-intensive or high-latency tasks.

Basic Principles of Web Worker

The browser's main thread handles rendering, event processing, and JavaScript execution. Long-running scripts can cause page lag. Web Workers solve this issue by creating independent threads, with communication between threads achieved through message passing. Worker threads cannot directly manipulate the DOM but can perform computation-intensive tasks.

Workers are divided into Dedicated Workers and Shared Workers. Dedicated Workers can only be used by the script that created them, while Shared Workers can be shared by multiple scripts. Below is an example of creating a Dedicated Worker:

// Main thread
const worker = new Worker('worker.js');

worker.postMessage({ type: 'start', data: 10000 });

worker.onmessage = (event) => {
  console.log('Result:', event.data);
};

// worker.js
self.onmessage = (event) => {
  if (event.data.type === 'start') {
    const result = heavyCalculation(event.data.data);
    self.postMessage(result);
  }
};

function heavyCalculation(n) {
  // Simulate time-consuming computation
  let sum = 0;
  for (let i = 0; i < n; i++) {
    sum += Math.sqrt(i);
  }
  return sum;
}

Analysis of Suitable Scenarios

Web Workers are most suitable for handling the following types of tasks:

1. Large-scale data processing: Such as CSV/JSON parsing, image processing.
2. Complex algorithms: Encryption/decryption, physics simulations.
3. High-latency operations: Large-scale data reads/writes in IndexedDB.
4. Real-time computations: Audio processing, video encoding/decoding.

Scenarios that are not suitable include tasks requiring frequent DOM manipulation or dependencies on the main thread's state. For example, the following case is inappropriate for Workers:

// Incorrect example: Workers cannot directly manipulate the DOM
self.onmessage = (event) => {
  document.getElementById('result').textContent = event.data; // Error
};

Performance Optimization Practices

Task Chunking Strategy

Break large tasks into smaller chunks to avoid prolonged thread occupation:

// Main thread
const worker = new Worker('chunk-worker.js');
const data = prepareHugeData(); // Prepare a large dataset
const CHUNK_SIZE = 1000;

for (let i = 0; i < data.length; i += CHUNK_SIZE) {
  const chunk = data.slice(i, i + CHUNK_SIZE);
  worker.postMessage({ chunk, index: i });
}

// chunk-worker.js
self.onmessage = (event) => {
  const result = processChunk(event.data.chunk);
  self.postMessage({
    index: event.data.index,
    result
  });
};

Thread Pool Management

Creating and destroying Workers incurs overhead. Use a thread pool to reuse Workers:

class WorkerPool {
  constructor(size, workerScript) {
    this.pool = [];
    this.queue = [];
    
    for (let i = 0; i < size; i++) {
      const worker = new Worker(workerScript);
      worker.onmessage = (e) => {
        this._onComplete(worker, e.data);
      };
      this.pool.push(worker);
    }
  }

  _onComplete(worker, result) {
    const callback = this.queue.shift();
    callback?.(result);
    
    if (this.queue.length > 0) {
      const nextTask = this.queue[0];
      worker.postMessage(nextTask.data);
    } else {
      this.pool.push(worker);
    }
  }

  postMessage(data) {
    return new Promise((resolve) => {
      if (this.pool.length > 0) {
        const worker = this.pool.pop();
        worker.postMessage(data);
        this.queue.push({ resolve });
      } else {
        this.queue.push({ data, resolve });
      }
    });
  }
}

// Usage example
const pool = new WorkerPool(4, 'worker.js');
pool.postMessage({ task: 'process' }).then(console.log);

Data Transfer Optimization

Worker communication uses the structured cloning algorithm, and large data transfers can significantly impact performance. Optimization methods include:

1. Using Transferable Objects to transfer ownership instead of copying:

// Main thread
const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage(buffer, [buffer]); // Transfer ownership

// Worker side
self.onmessage = (e) => {
  const buffer = e.data; // The main thread can no longer access this buffer
};

2. Shared memory (SharedArrayBuffer):

// Requires HTTPS and COOP/COEP headers
const sharedBuffer = new SharedArrayBuffer(1024);
const view = new Int32Array(sharedBuffer);

// Both main thread and Worker can directly manipulate the same memory
worker.postMessage({ buffer: sharedBuffer });

// Use Atomics for synchronization in the Worker
Atomics.add(view, 0, 1);

Advanced Application Patterns

Pipeline Processing

Break tasks into multiple stages, with each Worker handling a specific stage:

// Main thread
const preProcessWorker = new Worker('pre-process.js');
const mainProcessWorker = new Worker('main-process.js');

preProcessWorker.onmessage = (e) => {
  mainProcessWorker.postMessage(e.data);
};

mainProcessWorker.onmessage = (e) => {
  console.log('Final result:', e.data);
};

// pre-process.js
self.onmessage = (e) => {
  const stage1Result = stage1(e.data);
  self.postMessage(stage1Result);
};

// main-process.js
self.onmessage = (e) => {
  const finalResult = stage2(e.data);
  self.postMessage(finalResult);
};

Dynamic Worker Loading

Create Workers dynamically based on task complexity:

function createWorkerOnDemand(taskSize) {
  const workerCount = Math.ceil(taskSize / 500000);
  const workers = [];
  
  for (let i = 0; i < workerCount; i++) {
    workers.push(new Worker('dynamic-worker.js'));
  }
  
  return workers;
}

Debugging and Error Handling

Errors in Workers are not automatically displayed in the main thread console and require explicit listening:

worker.onerror = (e) => {
  console.error('Worker error:', e.message);
  e.preventDefault(); // Prevent default error logging
};

// Catch errors inside the Worker
self.onmessage = async (e) => {
  try {
    const result = await riskyOperation(e.data);
    self.postMessage(result);
  } catch (err) {
    self.postMessage({ error: err.message });
  }
};

Use the Performance API to measure Worker performance:

// Main thread
performance.mark('worker-start');
worker.postMessage(data);

worker.onmessage = (e) => {
  performance.mark('worker-end');
  performance.measure('worker-duration', 'worker-start', 'worker-end');
  console.log(performance.getEntriesByName('worker-duration'));
};

Browser Compatibility Considerations

Although modern browsers generally support Web Workers, note the following:

1. IE10 and below do not support it.
2. Some mobile browsers have thread limitations.
3. Service Workers and Web Workers are different specifications.

Feature detection solution:

if (window.Worker) {
  // Web Worker supported
} else {
  // Fallback solution
  console.warn('Web Workers not supported, falling back to main thread');
}

Practical Example: Image Processing

Below is a complete example of moving image filter application into a Worker:

// Main thread
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

const worker = new Worker('image-worker.js');
worker.postMessage(
  { pixels: imageData.data.buffer, width: imageData.width },
  [imageData.data.buffer] // Transfer ArrayBuffer
);

worker.onmessage = (e) => {
  const processedPixels = new Uint8ClampedArray(e.data.pixels);
  const newImageData = new ImageData(
    processedPixels,
    e.data.width
  );
  ctx.putImageData(newImageData, 0, 0);
};

// image-worker.js
self.onmessage = (e) => {
  const pixels = new Uint8ClampedArray(e.data.pixels);
  const width = e.data.width;
  
  // Apply filter (example: invert colors)
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255 - pixels[i];     // R
    pixels[i+1] = 255 - pixels[i+1]; // G
    pixels[i+2] = 255 - pixels[i+2]; // B
  }
  
  self.postMessage(
    { pixels: pixels.buffer, width },
    [pixels.buffer] // Transfer back to main thread
  );
};