JS◆ The JavaScript Book
About

Chapter XVI · Asynchronous JavaScript

Blocking vs Non-Blocking

Blocking execution halts further code processing until a task completes, whereas non-blocking code delegates operations and continues immediately.

01 How It Works

Think of a bank cashier blocking the queue by handling a complex loan application vs. sending customers to a side consultant desk.

Blocking code traps the single call stack, freezing the entire application runtime. Non-blocking asynchronous patterns keep the event loop responsive.

example.js
// Blocking example (Heavy sync loop):
// while(true) { /* freezes UI */ }

// Non-blocking example:
setTimeout(() => console.log("Non-blocking"), 1000);

  1. 1. Identify heavy or I/O-bound operations.

  2. 2. Apply non-blocking asynchronous APIs (Promises, async/await, timers).

  3. 3. Maintain responsive call stack execution flow.

02 Practical Example

Here is how you might see this concept applied in real-world code:

practical.js
// Non-blocking timer delegation
setTimeout(() => console.log("Executed asynchronously"), 0);
console.log("Executed first");

Key Takeaway

Writing non-blocking code is essential for maintaining smooth, responsive web applications.

Related Concepts