Web Workers for Heavy Computations

Imagine that the park lab is sequencing T-Rex DNA while the control room freezes: the cameras stop and the alarm button does not respond. That is how a browser behaves when heavy computations land on the main thread. Web Workers are a technology that lets you run JavaScript in separate threads, independently of the main UI (User Interface) thread, so the interface stays responsive.

What you will learn:

• move computations to a separate thread and talk to it through postMessage
• recognize the limits of a worker and tell Dedicated, Shared and Service Workers apart
• build a worker pool and share memory through SharedArrayBuffer
• measure performance and handle worker failures

Why Are Web Workers Needed?

The Problem of JavaScript's Single-Threaded Nature

Your code runs on a single main thread, which also handles clicks, scrolling and painting the page. See what a long loop does to it:

1// Problem: Blocking computations on the main thread
2function heavyCalculation(n) {
3  console.log('Starting heavy computations...');
4
5  // Simulation of intensive computations
6  let result = 0;
7  for (let i = 0; i < n; i++) {
8    for (let j = 0; j < 1000000; j++) {
9      result += Math.sqrt(i * j);
10    }
11  }
12
13  console.log('Computations completed');
14  return result;
15}
16
17// This will block the UI for several seconds!
18document.getElementById('calculate-button').addEventListener('click', () => {
19  const result = heavyCalculation(5000);
20  document.getElementById('result').textContent = result;
21});
22
23// During computations the user cannot:
24// - Click other buttons
25// - Scroll the page
26// - Use animations
27// - Type text in forms

As long as the computation runs, the event loop cannot handle a click or an animation frame. This is the problem Web Workers solve.

Performance Comparison

A worker does not compute faster, because it is the same JavaScript engine. The difference is who has to wait. This benchmark sketch compares both approaches:

1// Benchmark: Main Thread vs Web Worker
2const performanceTest = {
3  // Test without Web Worker - blocks UI
4  async testMainThread() {
5    console.time('Main Thread Calculation');
6
7    const start = performance.now();
8    const result = this.calculatePrimes(100000);
9    const end = performance.now();
10
11    console.timeEnd('Main Thread Calculation');
12
13    return {
14      result: result.length,
15      time: end - start,
16      blocked: true
17    };
18  },
19
20  // Test with Web Worker - does not block UI
21  async testWebWorker() {
22    console.time('Web Worker Calculation');
23
24    const start = performance.now();
25    const result = await this.calculatePrimesWorker(100000);
26    const end = performance.now();
27
28    console.timeEnd('Web Worker Calculation');
29
30    return {
31      result: result.length,
32      time: end - start,
33      blocked: false
34    };
35  },
36
37  calculatePrimes(max) {
38    const primes = [];
39    for (let i = 2; i <= max; i++) {
40      if (this.isPrime(i)) {
41        primes.push(i);
42      }
43    }
44    return primes;
45  },
46
47  isPrime(num) {
48    for (let i = 2; i <= Math.sqrt(num); i++) {
49      if (num % i === 0) return false;
50    }
51    return true;
52  }
53};

The time may be similar, but with a worker the interface keeps responding the whole time.

Basic Web Worker Implementations

Creating a Simple Web Worker

You create a worker with the new Worker('worker.js') constructor, which runs the script in a separate thread. The order matters: first set up the onmessage listener, then send data with postMessage, and finally end the work with the terminate() method:

1// main.js - main thread
2class WebWorkerManager {
3  constructor() {
4    this.worker = null;
5    this.setupWorker();
6  }
7
8  setupWorker() {
9    // Check Web Workers support
10    if (typeof Worker !== 'undefined') {
11      this.worker = new Worker('worker.js');
12
13      // Handle messages from the worker
14      this.worker.onmessage = (event) => {
15        this.handleWorkerMessage(event.data);
16      };
17
18      // Handle errors
19      this.worker.onerror = (error) => {
20        console.error('Worker error:', error);
21      };
22
23      console.log('Web Worker has been created');
24    } else {
25      console.warn('Web Workers are not supported in this browser');
26    }
27  }
28
29  // Send a task to the worker
30  sendTask(taskType, data) {
31    if (this.worker) {
32      this.worker.postMessage({
33        type: taskType,
34        data: data,
35        timestamp: Date.now()
36      });
37    }
38  }
39
40  // Handle responses from the worker
41  handleWorkerMessage(message) {
42    switch (message.type) {
43      case 'CALCULATION_COMPLETE':
44        this.displayResult(message.result);
45        break;
46      case 'PROGRESS_UPDATE':
47        this.updateProgress(message.progress);
48        break;
49      case 'ERROR':
50        this.handleError(message.error);
51        break;
52    }
53  }
54
55  // Terminate the worker
56  terminateWorker() {
57    if (this.worker) {
58      this.worker.terminate();
59      this.worker = null;
60      console.log('Web Worker has been terminated');
61    }
62  }
63}
64
65// Usage
66const workerManager = new WebWorkerManager();
67
68// Send a computation task
69document.getElementById('start-calculation').addEventListener('click', () => {
70  workerManager.sendTask('CALCULATE_PRIMES', { max: 100000 });
71});

You read the response from event.data, by assigning a function to onmessage or through addEventListener('message', ...). The data is not shared: the browser copies it with the structured clone algorithm, so you cannot send functions or DOM elements.

Implementing worker.js

On the other side, the worker listens with self.onmessage, replies with self.postMessage and can report progress:

1// worker.js - code executed in a separate thread
2class WorkerCalculations {
3  constructor() {
4    this.setupMessageHandler();
5  }
6
7  setupMessageHandler() {
8    // Main message handler from the main thread
9    self.onmessage = (event) => {
10      const { type, data, timestamp } = event.data;
11
12      try {
13        this.handleTask(type, data, timestamp);
14      } catch (error) {
15        this.sendError(error.message);
16      }
17    };
18  }
19
20  handleTask(type, data, timestamp) {
21    switch (type) {
22      case 'CALCULATE_PRIMES':
23        this.calculatePrimes(data.max);
24        break;
25      case 'PROCESS_IMAGE':
26        this.processImage(data.imageData);
27        break;
28      case 'SORT_LARGE_ARRAY':
29        this.sortArray(data.array);
30        break;
31      case 'MONTE_CARLO_PI':
32        this.calculatePiMonteCarlo(data.iterations);
33        break;
34      default:
35        this.sendError(`Unknown task type: ${type}`);
36    }
37  }
38
39  // Calculate prime numbers with progress reporting
40  calculatePrimes(max) {
41    const primes = [];
42    const updateInterval = Math.floor(max / 100); // Update every 1%
43
44    for (let i = 2; i <= max; i++) {
45      if (this.isPrime(i)) {
46        primes.push(i);
47      }
48
49      // Report progress
50      if (i % updateInterval === 0) {
51        const progress = (i / max) * 100;
52        this.sendProgress(progress);
53      }
54    }
55
56    this.sendResult('CALCULATION_COMPLETE', {
57      primes: primes,
58      count: primes.length,
59      executionTime: performance.now()
60    });
61  }
62
63  isPrime(num) {
64    if (num < 2) return false;
65    for (let i = 2; i <= Math.sqrt(num); i++) {
66      if (num % i === 0) return false;
67    }
68    return true;
69  }
70
71  // Image processing (filtering, transformations)
72  processImage(imageData) {
73    const { data, width, height, filterType } = imageData;
74
75    switch (filterType) {
76      case 'grayscale':
77        this.applyGrayscaleFilter(data);
78        break;
79      case 'blur':
80        this.applyBlurFilter(data, width, height);
81        break;
82      case 'edge':
83        this.applyEdgeDetection(data, width, height);
84        break;
85    }
86
87    this.sendResult('IMAGE_PROCESSED', {
88      processedData: data,
89      filterApplied: filterType
90    });
91  }
92
93  applyGrayscaleFilter(data) {
94    for (let i = 0; i < data.length; i += 4) {
95      const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
96      data[i] = gray;     // Red
97      data[i + 1] = gray; // Green
98      data[i + 2] = gray; // Blue
99      // Alpha (i + 3) remains unchanged
100    }
101  }
102
103  // Sorting large arrays
104  sortArray(array) {
105    const startTime = performance.now();
106
107    // Merge sort implementation for better performance
108    const sortedArray = this.mergeSort(array);
109
110    const endTime = performance.now();
111
112    this.sendResult('SORT_COMPLETE', {
113      sortedArray: sortedArray,
114      originalLength: array.length,
115      executionTime: endTime - startTime
116    });
117  }
118
119  mergeSort(arr) {
120    if (arr.length <= 1) return arr;
121
122    const mid = Math.floor(arr.length / 2);
123    const left = this.mergeSort(arr.slice(0, mid));
124    const right = this.mergeSort(arr.slice(mid));
125
126    return this.merge(left, right);
127  }
128
129  merge(left, right) {
130    const result = [];
131    let leftIndex = 0;
132    let rightIndex = 0;
133
134    while (leftIndex < left.length && rightIndex < right.length) {
135      if (left[leftIndex] <= right[rightIndex]) {
136        result.push(left[leftIndex]);
137        leftIndex++;
138      } else {
139        result.push(right[rightIndex]);
140        rightIndex++;
141      }
142    }
143
144    return result.concat(left.slice(leftIndex), right.slice(rightIndex));
145  }
146
147  // Calculate Pi using Monte Carlo method
148  calculatePiMonteCarlo(iterations) {
149    let pointsInCircle = 0;
150    const updateInterval = Math.floor(iterations / 100);
151
152    for (let i = 0; i < iterations; i++) {
153      const x = Math.random() * 2 - 1; // -1 to 1
154      const y = Math.random() * 2 - 1; // -1 to 1
155
156      if (x * x + y * y <= 1) {
157        pointsInCircle++;
158      }
159
160      if (i % updateInterval === 0) {
161        const currentPi = (pointsInCircle / i) * 4;
162        const progress = (i / iterations) * 100;
163
164        this.sendProgress(progress, { currentPi, iteration: i });
165      }
166    }
167
168    const finalPi = (pointsInCircle / iterations) * 4;
169
170    this.sendResult('PI_CALCULATION_COMPLETE', {
171      pi: finalPi,
172      iterations: iterations,
173      accuracy: Math.abs(Math.PI - finalPi)
174    });
175  }
176
177  // Helper methods for communication
178  sendResult(type, result) {
179    self.postMessage({
180      type: type,
181      result: result,
182      timestamp: Date.now()
183    });
184  }
185
186  sendProgress(progress, additionalData = {}) {
187    self.postMessage({
188      type: 'PROGRESS_UPDATE',
189      progress: progress,
190      ...additionalData,
191      timestamp: Date.now()
192    });
193  }
194
195  sendError(errorMessage) {
196    self.postMessage({
197      type: 'ERROR',
198      error: errorMessage,
199      timestamp: Date.now()
200    });
201  }
202}
203
204// Initialize worker
205new WorkerCalculations();

A worker has its own global scope (self) and no access to the DOM, document or window. It can use fetch, XMLHttpRequest, setTimeout, setInterval and IndexedDB, though. So the lifecycle looks like this: creation, postMessage(), work in the worker thread and receiving the result in onmessage.

Advanced Web Worker Patterns

Worker Pool for Parallel Computations

A pool creates several workers, usually as many as the number of cores reported by navigator.hardwareConcurrency, and distributes tasks from a queue:

1// WorkerPool.js - Managing multiple workers
2class WorkerPool {
3  constructor(workerScript, poolSize = navigator.hardwareConcurrency || 4) {
4    this.workerScript = workerScript;
5    this.poolSize = poolSize;
6    this.workers = [];
7    this.taskQueue = [];
8    this.activeTasksCount = 0;
9
10    this.initializePool();
11  }
12
13  initializePool() {
14    for (let i = 0; i < this.poolSize; i++) {
15      const worker = {
16        instance: new Worker(this.workerScript),
17        busy: false,
18        id: i
19      };
20
21      worker.instance.onmessage = (event) => {
22        this.handleWorkerMessage(worker, event.data);
23      };
24
25      worker.instance.onerror = (error) => {
26        this.handleWorkerError(worker, error);
27      };
28
29      this.workers.push(worker);
30    }
31
32    console.log(`Worker pool initialized with ${this.poolSize} workers`);
33  }
34
35  // Execute a task using the pool
36  execute(taskData) {
37    return new Promise((resolve, reject) => {
38      const task = {
39        data: taskData,
40        resolve: resolve,
41        reject: reject,
42        id: this.generateTaskId()
43      };
44
45      const availableWorker = this.getAvailableWorker();
46
47      if (availableWorker) {
48        this.assignTaskToWorker(availableWorker, task);
49      } else {
50        this.taskQueue.push(task);
51      }
52    });
53  }
54
55  getAvailableWorker() {
56    return this.workers.find(worker => !worker.busy);
57  }
58
59  assignTaskToWorker(worker, task) {
60    worker.busy = true;
61    worker.currentTask = task;
62    this.activeTasksCount++;
63
64    worker.instance.postMessage({
65      taskId: task.id,
66      ...task.data
67    });
68  }
69
70  handleWorkerMessage(worker, message) {
71    const task = worker.currentTask;
72
73    if (message.type === 'TASK_COMPLETE') {
74      task.resolve(message.result);
75      this.releaseWorker(worker);
76    } else if (message.type === 'TASK_ERROR') {
77      task.reject(new Error(message.error));
78      this.releaseWorker(worker);
79    } else if (message.type === 'PROGRESS_UPDATE') {
80      // Pass progress update (optional)
81      if (task.onProgress) {
82        task.onProgress(message.progress);
83      }
84    }
85  }
86
87  releaseWorker(worker) {
88    worker.busy = false;
89    worker.currentTask = null;
90    this.activeTasksCount--;
91
92    // Check if there are tasks in the queue
93    if (this.taskQueue.length > 0) {
94      const nextTask = this.taskQueue.shift();
95      this.assignTaskToWorker(worker, nextTask);
96    }
97  }
98
99  handleWorkerError(worker, error) {
100    console.error(`Worker ${worker.id} error:`, error);
101
102    if (worker.currentTask) {
103      worker.currentTask.reject(error);
104      this.releaseWorker(worker);
105    }
106  }
107
108  // Parallel processing of large datasets
109  async processInParallel(dataArray, chunkProcessor) {
110    const chunkSize = Math.ceil(dataArray.length / this.poolSize);
111    const chunks = [];
112
113    // Split data into chunks
114    for (let i = 0; i < dataArray.length; i += chunkSize) {
115      chunks.push(dataArray.slice(i, i + chunkSize));
116    }
117
118    // Process chunks in parallel
119    const promises = chunks.map(chunk =>
120      this.execute({
121        type: 'PROCESS_CHUNK',
122        chunk: chunk,
123        processor: chunkProcessor.toString()
124      })
125    );
126
127    const results = await Promise.all(promises);
128
129    // Combine results
130    return results.flat();
131  }
132
133  generateTaskId() {
134    return `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
135  }
136
137  // Terminate all workers
138  terminate() {
139    this.workers.forEach(worker => {
140      worker.instance.terminate();
141    });
142
143    this.workers = [];
144    this.taskQueue = [];
145    console.log('Worker pool terminated');
146  }
147
148  // Pool statistics
149  getStats() {
150    return {
151      poolSize: this.poolSize,
152      activeWorkers: this.workers.filter(w => w.busy).length,
153      queueLength: this.taskQueue.length,
154      activeTasks: this.activeTasksCount
155    };
156  }
157}
158
159// Using Worker Pool
160const workerPool = new WorkerPool('calculation-worker.js', 8);
161
162// Example of parallel processing
163async function processLargeDataset() {
164  const largeArray = Array.from({ length: 1000000 }, (_, i) => Math.random() * 1000);
165
166  try {
167    const results = await workerPool.processInParallel(largeArray, (chunk) => {
168      // Processing function will be executed in a worker
169      return chunk.map(x => Math.sqrt(x * x + 1));
170    });
171
172    console.log('Processing completed:', results.length);
173    console.log('Stats:', workerPool.getStats());
174  } catch (error) {
175    console.error('Processing error:', error);
176  }
177}

When all workers are busy, a task waits in the queue, and releaseWorker hands out the next one right away. chunkProcessor reaches the worker as text, because postMessage cannot carry functions.

Shared Array Buffer for Efficient Communication

SharedArrayBuffer is memory visible to several threads at once, so the workers write the results of matrix multiplication straight into a shared buffer, without copying:

1// SharedArrayBufferWorker.js - Shared memory between workers
2class SharedArrayBufferManager {
3  constructor() {
4    this.checkSupport();
5  }
6
7  checkSupport() {
8    if (typeof SharedArrayBuffer === 'undefined') {
9      console.warn('SharedArrayBuffer is not supported');
10      this.fallbackToTransferableObjects();
11      return false;
12    }
13    return true;
14  }
15
16  // Create shared memory for matrix computations
17  createSharedMatrixBuffer(rows, cols) {
18    const bufferSize = rows * cols * Float64Array.BYTES_PER_ELEMENT;
19    const sharedBuffer = new SharedArrayBuffer(bufferSize);
20    const matrix = new Float64Array(sharedBuffer);
21
22    return {
23      buffer: sharedBuffer,
24      matrix: matrix,
25      rows: rows,
26      cols: cols,
27
28      // Helper methods (they use the matrix variable, because this in an arrow function is the manager)
29      get: (row, col) => {
30        return matrix[row * cols + col];
31      },
32
33      set: (row, col, value) => {
34        matrix[row * cols + col] = value;
35      },
36
37      fill: (value) => {
38        matrix.fill(value);
39      }
40    };
41  }
42
43  // Parallel matrix multiplication
44  async parallelMatrixMultiply(matrixA, matrixB, workerCount = 4) {
45    const rowsA = matrixA.rows;
46    const colsA = matrixA.cols;
47    const colsB = matrixB.cols;
48
49    // Create shared result matrix
50    const resultMatrix = this.createSharedMatrixBuffer(rowsA, colsB);
51
52    // Distribute work among workers
53    const rowsPerWorker = Math.ceil(rowsA / workerCount);
54    const workers = [];
55
56    for (let i = 0; i < workerCount; i++) {
57      const startRow = i * rowsPerWorker;
58      const endRow = Math.min(startRow + rowsPerWorker, rowsA);
59
60      if (startRow < rowsA) {
61        const worker = new Worker('matrix-worker.js');
62
63        const promise = new Promise((resolve, reject) => {
64          worker.onmessage = (event) => {
65            if (event.data.type === 'MATRIX_COMPLETE') {
66              worker.terminate();
67              resolve(event.data.result);
68            }
69          };
70
71          worker.onerror = reject;
72        });
73
74        worker.postMessage({
75          type: 'MULTIPLY_MATRIX_ROWS',
76          matrixABuffer: matrixA.buffer,
77          matrixBBuffer: matrixB.buffer,
78          resultBuffer: resultMatrix.buffer,
79          dimensions: {
80            rowsA: rowsA,
81            colsA: colsA,
82            colsB: colsB
83          },
84          rowRange: { start: startRow, end: endRow }
85        });
86
87        workers.push(promise);
88      }
89    }
90
91    await Promise.all(workers);
92    return resultMatrix;
93  }
94
95  fallbackToTransferableObjects() {
96    console.log('Using Transferable Objects as an alternative');
97    // Implementation with Transferable Objects
98  }
99}
100
101// matrix-worker.js - Worker for matrix computations
102self.onmessage = function(event) {
103  const { type, matrixABuffer, matrixBBuffer, resultBuffer, dimensions, rowRange } = event.data;
104
105  if (type === 'MULTIPLY_MATRIX_ROWS') {
106    const matrixA = new Float64Array(matrixABuffer);
107    const matrixB = new Float64Array(matrixBBuffer);
108    const result = new Float64Array(resultBuffer);
109
110    const { rowsA, colsA, colsB } = dimensions;
111    const { start, end } = rowRange;
112
113    // Matrix multiplication for assigned rows
114    for (let i = start; i < end; i++) {
115      for (let j = 0; j < colsB; j++) {
116        let sum = 0;
117        for (let k = 0; k < colsA; k++) {
118          sum += matrixA[i * colsA + k] * matrixB[k * colsB + j];
119        }
120        result[i * colsB + j] = sum;
121      }
122    }
123
124    self.postMessage({
125      type: 'MATRIX_COMPLETE',
126      result: `Rows ${start}-${end} completed`
127    });
128  }
129};

Each worker computes different rows, so they do not get in each other's way. When threads change the same cells, use Atomics (for example Atomics.add and Atomics.wait), which operate atomically. Browsers expose SharedArrayBuffer only to pages isolated with the Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp headers.

Service Worker for Background Processing

Besides the regular (dedicated) worker there are two more kinds. A Shared Worker, created with new SharedWorker(), is shared by tabs and windows from the same origin. A Service Worker sits between the page and the network and handles caching, offline mode and background sync:

1// ServiceWorkerManager.js - Managing long-running background tasks
2class ServiceWorkerManager {
3  constructor() {
4    this.serviceWorker = null;
5    this.messageChannel = null;
6    this.setupServiceWorker();
7  }
8
9  async setupServiceWorker() {
10    if ('serviceWorker' in navigator) {
11      try {
12        const registration = await navigator.serviceWorker.register('background-worker.js');
13
14        // Wait for service worker activation
15        await navigator.serviceWorker.ready;
16
17        this.serviceWorker = registration.active || registration.waiting || registration.installing;
18        this.setupMessageChannel();
19
20        console.log('Service Worker registered and ready');
21      } catch (error) {
22        console.error('Service Worker registration error:', error);
23      }
24    }
25  }
26
27  setupMessageChannel() {
28    this.messageChannel = new MessageChannel();
29
30    // Handle messages from the Service Worker
31    this.messageChannel.port1.onmessage = (event) => {
32      this.handleServiceWorkerMessage(event.data);
33    };
34
35    // Send port to the Service Worker
36    navigator.serviceWorker.controller?.postMessage(
37      { type: 'INIT_PORT' },
38      [this.messageChannel.port2]
39    );
40  }
41
42  // Schedule a long-running task for the Service Worker
43  scheduleBackgroundTask(taskConfig) {
44    if (this.messageChannel) {
45      this.messageChannel.port1.postMessage({
46        type: 'SCHEDULE_TASK',
47        task: {
48          id: this.generateTaskId(),
49          ...taskConfig,
50          scheduledAt: Date.now()
51        }
52      });
53    }
54  }
55
56  // Example: Periodic data synchronization
57  scheduleDataSync(interval = 300000) { // 5 minutes
58    this.scheduleBackgroundTask({
59      type: 'DATA_SYNC',
60      interval: interval,
61      endpoint: '/api/sync',
62      recurring: true
63    });
64  }
65
66  // Example: Background file processing
67  scheduleFileProcessing(files) {
68    files.forEach(file => {
69      this.scheduleBackgroundTask({
70        type: 'FILE_PROCESSING',
71        fileName: file.name,
72        fileData: file,
73        processor: 'image-compression'
74      });
75    });
76  }
77
78  handleServiceWorkerMessage(message) {
79    switch (message.type) {
80      case 'TASK_COMPLETED':
81        this.onTaskCompleted(message.task, message.result);
82        break;
83      case 'TASK_FAILED':
84        this.onTaskFailed(message.task, message.error);
85        break;
86      case 'SYNC_COMPLETED':
87        this.onSyncCompleted(message.result);
88        break;
89    }
90  }
91
92  onTaskCompleted(task, result) {
93    console.log(`Task ${task.id} completed:`, result);
94
95    // Update UI or application state
96    this.updateApplicationState(task, result);
97  }
98
99  generateTaskId() {
100    return `bg_task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
101  }
102}
103
104// background-worker.js - Service Worker
105class BackgroundTaskProcessor {
106  constructor() {
107    this.activeTasks = new Map();
108    this.messagePort = null;
109    this.setupEventListeners();
110  }
111
112  setupEventListeners() {
113    self.addEventListener('message', (event) => {
114      if (event.data.type === 'INIT_PORT') {
115        this.messagePort = event.ports[0];
116        this.setupPortListener();
117      }
118    });
119
120    // Background Sync
121    self.addEventListener('sync', (event) => {
122      if (event.tag === 'background-data-sync') {
123        event.waitUntil(this.performDataSync());
124      }
125    });
126  }
127
128  setupPortListener() {
129    this.messagePort.onmessage = (event) => {
130      this.handleTask(event.data);
131    };
132  }
133
134  async handleTask(message) {
135    if (message.type === 'SCHEDULE_TASK') {
136      const task = message.task;
137
138      try {
139        const result = await this.executeTask(task);
140
141        this.messagePort.postMessage({
142          type: 'TASK_COMPLETED',
143          task: task,
144          result: result
145        });
146      } catch (error) {
147        this.messagePort.postMessage({
148          type: 'TASK_FAILED',
149          task: task,
150          error: error.message
151        });
152      }
153    }
154  }
155
156  async executeTask(task) {
157    switch (task.type) {
158      case 'DATA_SYNC':
159        return await this.performDataSync(task);
160      case 'FILE_PROCESSING':
161        return await this.processFile(task);
162      case 'BATCH_CALCULATION':
163        return await this.performBatchCalculation(task);
164      default:
165        throw new Error(`Unknown task type: ${task.type}`);
166    }
167  }
168
169  async performDataSync(task) {
170    try {
171      const response = await fetch(task.endpoint, {
172        method: 'POST',
173        headers: { 'Content-Type': 'application/json' },
174        body: JSON.stringify({ timestamp: Date.now() })
175      });
176
177      if (!response.ok) {
178        throw new Error(`Sync failed: ${response.status}`);
179      }
180
181      const data = await response.json();
182
183      // Store in IndexedDB or Cache API
184      await this.storeDataLocally(data);
185
186      return { success: true, syncedRecords: data.length };
187    } catch (error) {
188      throw new Error(`Data sync failed: ${error.message}`);
189    }
190  }
191
192  async processFile(task) {
193    // File processing simulation
194    const { fileName, processor } = task;
195
196    switch (processor) {
197      case 'image-compression':
198        return await this.compressImage(task.fileData);
199      case 'video-transcoding':
200        return await this.transcodeVideo(task.fileData);
201      default:
202        throw new Error(`Unknown processor: ${processor}`);
203    }
204  }
205
206  async storeDataLocally(data) {
207    // IndexedDB storage implementation
208    return new Promise((resolve, reject) => {
209      const request = indexedDB.open('AppDatabase', 1);
210
211      request.onsuccess = (event) => {
212        const db = event.target.result;
213        const transaction = db.transaction(['syncedData'], 'readwrite');
214        const store = transaction.objectStore('syncedData');
215
216        store.put({ id: 'latest', data: data, timestamp: Date.now() });
217
218        transaction.oncomplete = () => resolve();
219        transaction.onerror = () => reject(transaction.error);
220      };
221
222      request.onerror = () => reject(request.error);
223    });
224  }
225}
226
227new BackgroundTaskProcessor();

A Service Worker is not suited to long computations, though, because the browser puts it to sleep when it is not handling events. On the first visit navigator.serviceWorker.controller can be null, hence the ?. operator in the code.

Performance Monitoring and Debugging

The monitor wraps postMessage and onmessage to record the duration of every task:

1// WorkerPerformanceMonitor.js
2class WorkerPerformanceMonitor {
3  constructor() {
4    this.metrics = {
5      taskExecutionTimes: [],
6      memoryUsage: [],
7      errorRates: {},
8      throughput: []
9    };
10
11    this.startTime = performance.now();
12  }
13
14  // Monitor worker performance
15  monitorWorkerPerformance(worker, taskId) {
16    const startTime = performance.now();
17    let memoryBefore = null;
18
19    // Memory measurement (if available)
20    if (performance.memory) {
21      memoryBefore = performance.memory.usedJSHeapSize;
22    }
23
24    const originalPostMessage = worker.postMessage.bind(worker);
25    const originalOnMessage = worker.onmessage;
26
27    // Intercept postMessage
28    worker.postMessage = (message) => {
29      console.log(`[Worker] Sending task ${taskId}:`, message);
30      originalPostMessage(message);
31    };
32
33    // Intercept onmessage
34    worker.onmessage = (event) => {
35      const endTime = performance.now();
36      const executionTime = endTime - startTime;
37
38      // Record execution time metric
39      this.metrics.taskExecutionTimes.push({
40        taskId: taskId,
41        executionTime: executionTime,
42        timestamp: Date.now()
43      });
44
45      // Memory measurement after execution
46      if (performance.memory && memoryBefore) {
47        const memoryAfter = performance.memory.usedJSHeapSize;
48        const memoryDelta = memoryAfter - memoryBefore;
49
50        this.metrics.memoryUsage.push({
51          taskId: taskId,
52          memoryDelta: memoryDelta,
53          timestamp: Date.now()
54        });
55      }
56
57      console.log(`[Worker] Task ${taskId} completed in ${executionTime.toFixed(2)}ms`);
58
59      if (originalOnMessage) {
60        originalOnMessage(event);
61      }
62    };
63
64    return worker;
65  }
66
67  // Performance analysis
68  generatePerformanceReport() {
69    const report = {
70      totalRuntime: performance.now() - this.startTime,
71      taskCount: this.metrics.taskExecutionTimes.length,
72      averageExecutionTime: this.calculateAverageExecutionTime(),
73      memoryTrends: this.analyzeMemoryTrends(),
74      throughputAnalysis: this.calculateThroughput(),
75      recommendations: this.generateRecommendations()
76    };
77
78    return report;
79  }
80
81  calculateAverageExecutionTime() {
82    if (this.metrics.taskExecutionTimes.length === 0) return 0;
83
84    const total = this.metrics.taskExecutionTimes.reduce(
85      (sum, metric) => sum + metric.executionTime, 0
86    );
87
88    return total / this.metrics.taskExecutionTimes.length;
89  }
90
91  analyzeMemoryTrends() {
92    if (this.metrics.memoryUsage.length === 0) return null;
93
94    const memoryDeltas = this.metrics.memoryUsage.map(m => m.memoryDelta);
95    const averageMemoryDelta = memoryDeltas.reduce((a, b) => a + b, 0) / memoryDeltas.length;
96
97    return {
98      averageMemoryDelta: averageMemoryDelta,
99      maxMemoryDelta: Math.max(...memoryDeltas),
100      minMemoryDelta: Math.min(...memoryDeltas),
101      potentialMemoryLeak: averageMemoryDelta > 1024 * 1024 // > 1MB average
102    };
103  }
104
105  calculateThroughput() {
106    const timeWindow = 60000; // 1 minute
107    const now = Date.now();
108    const recentTasks = this.metrics.taskExecutionTimes.filter(
109      task => now - task.timestamp < timeWindow
110    );
111
112    return {
113      tasksPerMinute: recentTasks.length,
114      averageTaskTime: recentTasks.length > 0
115        ? recentTasks.reduce((sum, task) => sum + task.executionTime, 0) / recentTasks.length
116        : 0
117    };
118  }
119
120  generateRecommendations() {
121    const recommendations = [];
122    const avgTime = this.calculateAverageExecutionTime();
123    const memoryTrends = this.analyzeMemoryTrends();
124
125    if (avgTime > 5000) { // > 5 seconds
126      recommendations.push('Consider splitting long-running tasks into smaller chunks');
127    }
128
129    if (memoryTrends?.potentialMemoryLeak) {
130      recommendations.push('Potential memory leak detected - review memory management');
131    }
132
133    if (this.metrics.taskExecutionTimes.length > 1000) {
134      recommendations.push('Large number of tasks - consider implementing a Worker Pool');
135    }
136
137    return recommendations;
138  }
139}
140
141// Monitoring usage
142const performanceMonitor = new WorkerPerformanceMonitor();
143
144// Monitor a specific worker
145const worker = new Worker('calculation-worker.js');
146const monitoredWorker = performanceMonitor.monitorWorkerPerformance(worker, 'task_001');
147
148// Generate report after some time
149setTimeout(() => {
150  const report = performanceMonitor.generatePerformanceReport();
151  console.log('Performance Report:', report);
152}, 30000);