Suggest an edit

Improve this article

Refine the answer for “Blocking operation”. 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)

## In short

When a **blocking operation** happens in JavaScript,
the **event loop** **waits**
until it finishes,
which means the whole interface "freezes", buttons stop responding,
and animations and network requests are not processed.

## Example of a blocking operation

```javascript
console.log('A');

function block(ms) {
  const start = Date.now();
  while (Date.now() - start < ms) {}
}

block(3000); // block the thread for 3 seconds

console.log('B');
```

Output:

```javascript
A
(3-second pause)
B
```

While `while` is running,
JS cannot do **anything else**:
it cannot process clicks, run timers, or update the interface.
This is exactly what **blocking** is.

## Why this happens

JavaScript runs on a **single thread**:
at any given moment, the **Call Stack**
can be executing only **one task**.

When long-running code lands there,
it **occupies the whole thread**,
and **the rest of the tasks (including asynchronous ones)** wait until it finishes.

Even if you have a `setTimeout`, it will not run
until the stack is free.

## Visually

```javascript
┌──────────────────────┐
│ Call Stack           │ ← running a blocking operation
│ (busy for a while)   │
└──────────────────────┘
       ↓
Event Loop waits
Callback queue waits
```

No asynchronous task can enter the stack
until the blocking one finishes.

## Examples of typical blocking operations in JS

| Operation | Why it blocks |
| --- | --- |
| A long `while` / `for` | occupies the processor |
| Heavy computations (recursion, sorting, cryptography) | blocks the thread |
| `alert()`, `prompt()` | stops script execution |
| `sync` versions of Node.js methods (`fs.readFileSync`) | wait for the result |
| Long JSON conversions (`JSON.stringify(huge_object)`) | run synchronously |

## What happens to asynchronous code during blocking

```javascript
console.log('1');

setTimeout(() => console.log('2'), 0);

const start = Date.now();
while (Date.now() - start < 3000) {} // blocking loop, 3 sec

console.log('3');
```

Output:

```javascript
1
(3-second pause)
3
2
```

`setTimeout(..., 0)` did not help:
its callback was placed into the queue,
but it **could not run**
until the stack was freed after the `while` loop.

## How to avoid blocking

**Split large tasks** into chunks (via `setTimeout` / `requestIdleCallback`):

```javascript
function bigTask() {
  for (let i = 0; i < 1e9; i++) {
    if (i % 1e6 === 0) console.log(i);
  }
}

setTimeout(bigTask, 0); // runs asynchronously, without blocking the interface
```

**Use Web Workers** - for heavy computations on a separate thread:

```javascript
// worker.js
onmessage = (e) => {
  const result = e.data ** 2;
  postMessage(result);
};
```

**In Node.js** - use `fs.promises` instead of `fs.readFileSync`.

## A real-life example

Imagine you have one waiter (the JS thread):

- **Blocking** code - the waiter waits for a dish to be cooked and does not serve anyone else.
- **Non-blocking** - they hand the order to the kitchen and go serve the next table.

JavaScript is like the second option.
But if the waiter starts "stirring the soup" themselves for 10 minutes (CPU-heavy code),
service comes to a halt.

## Summary

| Term | What it means |
| --- | --- |
| **Blocking operation** | A task that stops the rest of the code from running |
| **Result** | The event loop "freezes", the UI stops responding |
| **Examples** | Long loops, sync functions, alert(), heavy computations |
| **How to avoid it** | Asynchronous APIs, Web Workers, splitting tasks |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.