Suggest an edit

Improve this article

Refine the answer for “What does a Web Worker do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What a Web Worker is

A **Web Worker** is a separate background JavaScript thread
that runs **in parallel** with the main (UI) thread.

It **has no access to the DOM**, but it can:

- perform heavy computations (for example, parsing, encryption, sorting large arrays),
- exchange messages with the main thread via `postMessage`,
- work independently of the interface, without "freezing" the site.

---

## How it works

Picture the browser:

- The **main thread** handles the DOM, events, rendering, and the interface.
- The **worker thread** is a background thread that runs JS code.

They communicate with each other through **message passing**, like two separate processes.

---

## Usage example

### 1. The worker.js file

```javascript
// This code runs in a separate thread
self.onmessage = (event) => {
  const n = event.data;
  let sum = 0;
  for (let i = 0; i < n; i++) {
    sum += i;
  }
  // Send the result back to the main thread
  self.postMessage(sum);
};
```

### 2. In the main file (for example, main.js)

```javascript
const worker = new Worker('worker.js');

// Send the task
worker.postMessage(1e8);

// Get the result
worker.onmessage = (event) => {
  console.log('Result:', event.data);
};

// You can listen for errors
worker.onerror = (err) => {
  console.error('Error in the worker:', err);
};
```

Now the sum from 0 to 100 million is computed **in the background**,
and the interface stays **smooth and responsive**.

---

## Exchanging data

- Data is passed through **serialization** (structured clone).
- Large data can be passed **without copying** using **Transferable objects**:

```javascript
  const buffer = new ArrayBuffer(1024);
  worker.postMessage(buffer, [buffer]); // Transfer ownership
  ```
After the transfer, `buffer` becomes unavailable in the main thread (it was passed by reference).

---

## Limitations

- No access to:
  - `document`, `window`, `alert`, `localStorage`
  - the DOM directly (only data can be passed)
- Available:
  - `fetch`, `setTimeout`, `Promise`, `WebSocket`, `IndexedDB`
  - importing other scripts via `importScripts()`

---

## Types of workers

| Type | Description |
|---|---|
| **Dedicated Worker** | Works with only one main thread (the most common case) |
| **Shared Worker** | Can be used by **several pages** or tabs of the same domain |
| **Service Worker** | A proxy between the app and the network: cache, offline mode, push notifications |

---

## When to use a Web Worker

Good fit:

- Processing large data (JSON, CSV, images, matrices)
- Generating thumbnails, encoding images
- Cryptography, hashing (SHA-256, PBKDF2)
- Complex algorithms (pathfinding, sorting, simulations)
- AI inference, ML models in the browser

Not needed:

- For simple requests or light computations
- When access to the DOM matters

---

## Modern improvements

- `Comlink` is a library that simplifies working with workers:

```javascript
  import { wrap } from 'comlink';
  const worker = new Worker('worker.js');
  const api = wrap(worker);

// You can just call methods as async functions
  await api.calculateSomething(123);
  ```
- With `ES Modules` you can create workers with `type: 'module'`:

```javascript
  const worker = new Worker('./worker.js', { type: 'module' });
  ```

---

## Summary

| What it does | How it helps |
|---|---|
| Runs JS code in a separate thread | Does not block the main Event Loop |
| Exchanges messages with the main thread | Work can be parallelized |
| Has no access to the DOM | Safe and isolated |
| Used for heavy computations | Improves responsiveness and FPS |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts569 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.