What are Web Workers?

Learn to offload heavy work to a background thread with Web Workers.

What are Web Workers?

A Web Worker runs JavaScript in a separate background thread, away from the main thread. Normally all JavaScript runs on a single thread; a long task blocks the main thread and the page freezes.

A worker offloads heavy computations to the background and keeps the main thread free. The user interface stays smooth and buttons remain clickable. The worker and the main thread communicate only by messaging; memory is not shared directly.

Worker scope

A worker runs in its own global scope (worker scope); it cannot access the window object. Instead, the self keyword gives the worker's global object.

From inside a worker, some browser APIs like document, localStorage or console are unavailable. But APIs like fetch, IndexedDB and setTimeout do run in a worker. Touching the DOM is forbidden; only the main thread updates the UI.

Exercise Detect Web Worker support

Check whether 'Worker' exists on window using the in operator. If missing, log 'unsupported' with console.log; otherwise log 'supported'.

Show example solution

if (!('Worker' in window)) {
  console.log('unsupported');
} else {
  console.log('supported');
}

Test yourself

What does a Web Worker do?
- It runs heavy work in a background thread without blocking the main thread
- It selects all HTML elements on the page
- It fetches data from the server
- It changes CSS styles
Show answer

It runs heavy work in a background thread without blocking the main thread — Correct! The worker runs heavy computation in the background; the main thread stays free.
Worker vs main thread

window

main thread global
self

worker global
document

main thread only
postMessage

both sides

Create a worker

const worker = new ____('sorter.js');

Show answer

const worker = new Worker('sorter.js');

Next lesson: Creating a worker

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies