Understanding JavaScript Web Workers and Shared Workers: Concepts, Usage, and Debugging

JavaScript uses a single‑threaded model, which means all tasks run on the same thread. When a task takes a long time, the UI thread is blocked and the browser becomes unresponsive.

Example that blocks the browser:

// 计算斐波那契数列
const fibonacci = (n) => {
    count += 1;
    if (n === 0) return 0;
    if (n === 1) return 1;
    if (n > 1) return fibonacci(n - 1) + fibonacci(n - 2)
}
const time0 = new Date().getTime();
console.log('time0', time0);

fibonacci(40);

const time1 = new Date().getTime();
console.log('time1', time1);
const duration = time1 - time0;
console.log('duration', duration);
// const f = (n) => n > 1 ? f(n - 1) + f(n -2) : n

Because the JavaScript engine and the GUI rendering thread are mutually exclusive, heavy computation prevents the GUI thread from updating, leading to a frozen page.

Web Worker is defined in the HTML5 specification. It creates an independent thread that can run JavaScript code without blocking the main UI thread. Workers cannot access the DOM, window , or document directly; they communicate with the main thread via postMessage and onmessage .

Typical usage:

const worker = new Worker('worker.js');
worker.onmessage = (e) => {
    // handle data from worker
    console.log(e.data);
};
worker.postMessage('start');

Worker options (available when constructing a worker):

name : a string identifier accessible inside the worker via self.name .

type : 'classic' (default) or 'module' . The former runs the script as a classic script; the latter treats it as an ES module.

credentials : controls credential handling for module workers; values are 'omit' , 'same-origin' , or 'include' .

Creating a worker with options:

const worker = new Worker('worker.js', { name: 'myWorker', type: 'module', credentials: 'same-origin' });

Shared Worker is similar to a dedicated worker but can be accessed by multiple browsing contexts (e.g., different tabs) that share the same origin. Communication is performed through a MessagePort exposed as sharedWorker.port .

Creating a shared worker:

const sharedWorker = new SharedWorker('sharedWorker.js', 'sharedName');
sharedWorker.port.onmessage = (e) => {
    console.log('message from other page:', e.data);
};
sharedWorker.port.postMessage('hello from this page');

Typical shared‑worker pattern – maintain a pool of ports to broadcast messages:

// sharedWorker.js
const portPool = [];
onconnect = (e) => {
    const port = e.ports[0];
    portPool.push(port);
    port.onmessage = (msg) => {
        // broadcast to all other ports
        portPool.forEach(p => {
            if (p !== port) p.postMessage(msg.data);
        });
    };
};

Worker lifecycle consists of three phases:

Initialization : calling new Worker() starts the request for the script and creates the worker object.

Active : the worker runs until it is terminated via self.close() or worker.terminate() . The environment persists even after the script finishes.

Termination : the worker stops when explicitly closed or when its associated document is unloaded.

Debugging:

Dedicated workers can be inspected in Chrome’s Sources panel.

Shared workers are inspected via chrome://inspect/#workers and can be monitored with Chrome Task Manager or OS activity monitors.

In summary, Web Workers (dedicated and shared) enable asynchronous JavaScript execution without blocking the UI, making them ideal for heavy calculations and data processing. They have isolated environments and communicate only through asynchronous messaging.