Overview
Web Workers run JavaScript in background threads, preventing heavy computations from blocking the main thread and freezing the UI.
Use Cases
- Image Processing: Filter, resize, convert images
- Data Processing: Parsing large files, calculations
- Crypto: Encryption/decryption operations
- Machine Learning: Inference on ML models
- Real-time Analytics: Data aggregation and processing
Basic Worker
// worker.ts
self.onmessage = (event) => {
const { data } = event
const result = heavyComputation(data)
self.postMessage(result)
}
function heavyComputation(data: number[]): number {
return data.reduce((sum, n) => sum + n, 0)
}
Main Thread
// main.ts
const worker = new Worker(
new URL('./worker.ts', import.meta.url),
{ type: 'module' }
)
const data = Array.from({ length: 1_000_000 }, (_, i) => i)
worker.postMessage(data)
worker.onmessage = (event) => {
console.log('Sum:', event.data)
}
Shared Memory with ArrayBuffer
// For large data transfers, use ArrayBuffer
const buffer = new ArrayBuffer(1024 * 1024) // 1MB
worker.postMessage({ buffer }, [buffer]) // Transfer ownership
Transferable Objects
// Avoid copying large objects - transfer ownership instead
const data = new ImageData(width, height)
worker.postMessage({ data }, [data.data.buffer])
Web Workers can reduce main thread blocking by 90% for compute-heavy operations.