Web Workers: Running Asynchronous JavaScript Threads to Prevent UI Freezes

The Browser UI Freeze Limit

JavaScript executes on the main browser thread. This means UI rendering, scroll events, CSS layout calculations, and JavaScript code share a single thread.

• ◆The Issue: Running intensive computations (like rendering charts or parsing large CSV data) blocks the thread, causing the page to freeze.
• ◆The Solution: Web Workers, allowing developers to run scripts in background threads.

UI Performance Rule: Keep the main browser thread free for interface rendering, offloading calculations to Web Workers.

The Web Worker Context and Message Passing

Web Workers execute in a separate system thread. They do not have access to the DOM, the window object, or the document object. Communication with the main thread is managed using an event bridge:

• ◆`worker.postMessage(data)`: Sends data across thread boundaries.
• ◆`onmessage` Event Listener: Receives data frames.

Implementing a Web Worker

// Main thread script configuration in 2014
const worker = new Worker('analytics-worker.js');

worker.postMessage({ dataset: rawReportData });

// Listen for computed results from worker thread
worker.onmessage = function(event) {
    const chartData = event.data;
    renderDashboardChart(chartData); // Render computed data on DOM
};

By offloading calculations to background threads, web applications run intensive computations without dropping frames.