Harman Panwar

Posted on May 10

Synchronous vs Asynchronous JavaScript

Synchronous vs Asynchronous JavaScript: Understanding Blocking and Non-Blocking Code

JavaScript is single-threaded, meaning it can only execute one piece of code at a time. This makes the distinction between synchronous and asynchronous execution fundamental to writing performant applications. This guide explains both concepts with step-by-step execution examples, everyday analogies, and visual explanations of why blocking code causes problems.

What Synchronous Code Means

Step-by-Step Execution

Synchronous code executes line by line, in order, one statement at a time. Each line must complete before the next line begins. The program waits for each operation to finish before moving on.

Think of it like following a recipe where each step must be fully completed before you start the next:

Step 1: Boil water → Wait until boiling → Step 2: Add pasta → Wait until cooked → Step 3: Drain → Step 4: Serve

Visual Synchronous Execution

console.log("Step 1: Start cooking");

const result = boilWater();        // Takes 5 seconds
console.log("Step 2: Water boiled");

const pasta = cookPasta();         // Takes 10 seconds
console.log("Step 3: Pasta cooked");

const plate = serve(pasta);        // Takes 1 second
console.log("Step 4: Ready to eat");

// Output:
// Step 1: Start cooking
// [waits 5 seconds]
// Step 2: Water boiled
// [waits 10 seconds]
// Step 3: Pasta cooked
// [waits 1 second]
// Step 4: Ready to eat
// Total time: 16 seconds

Execution flow:

Time →
│
├─ console.log("Step 1") ────────────────→ Done instantly
├─ boilWater() ────────────────────────→ Blocks for 5 seconds
├─ console.log("Step 2") ────────────────→ Done instantly
├─ cookPasta() ────────────────────────→ Blocks for 10 seconds
├─ console.log("Step 3") ────────────────→ Done instantly
├─ serve(pasta) ───────────────────────→ Blocks for 1 second
├─ console.log("Step 4") ────────────────→ Done instantly
│
Total: 16 seconds of blocked execution

Every operation that takes time forces the program to wait. The CPU sits idle, doing nothing useful, while waiting for water to boil or pasta to cook.

What Asynchronous Code Means

Continuing Execution Without Waiting

Asynchronous code initiates an operation and immediately moves on to the next line. The operation continues in the background, and when it completes, a callback, promise resolution, or event notifies the program.

Think of it like a smart chef who doesn't stand idle:

Step 1: Start water boiling → Set a timer → Immediately start chopping vegetables
Step 2: Timer rings → Add pasta → Set another timer → Immediately start making sauce
Step 3: Timer rings → Drain pasta → Set final timer → Immediately set the table
Step 4: Timer rings → Serve everything

Visual Asynchronous Execution

console.log("Step 1: Start cooking");

setTimeout(() => {
  console.log("Step 2: Water boiled (timer rang)");
}, 5000);

console.log("Step 3: While waiting, chop vegetables");

setTimeout(() => {
  console.log("Step 4: Pasta cooked (timer rang)");
}, 10000);

console.log("Step 5: While waiting, make the sauce");

// Output:
// Step 1: Start cooking
// Step 3: While waiting, chop vegetables
// Step 5: While waiting, make the sauce
// [5 seconds pass]
// Step 2: Water boiled (timer rang)
// [5 more seconds pass]
// Step 4: Pasta cooked (timer rang)

Execution flow:

Time →
│
├─ console.log("Step 1") ────────────────→ Done instantly
├─ setTimeout(5s) ─────────────────────→ Scheduled, doesn't block
├─ console.log("Step 3") ────────────────→ Done instantly
├─ setTimeout(10s) ────────────────────→ Scheduled, doesn't block
├─ console.log("Step 5") ────────────────→ Done instantly
│
│ [CPU is free, doing other work or idle]
│
├─ [5s elapsed] Timer 1 fires ─────────→ console.log("Step 2")
│
│ [More time passes, CPU free]
│
├─ [10s elapsed] Timer 2 fires ────────→ console.log("Step 4")
│
Total: ~10 seconds, but main thread was never blocked

The program never waits. It schedules background tasks and continues executing. When those tasks complete, they notify the program through callbacks.

Why JavaScript Needs Asynchronous Behavior

The Single-Threaded Constraint

JavaScript was designed to run in browsers where it manipulates the DOM, handles user clicks, and fetches data. Browsers use a single thread for JavaScript execution. If that thread blocks, the entire page freezes:

Buttons stop responding
Animations stop playing
Scrolling becomes jerky or stops
The browser shows a "Page Unresponsive" warning

Synchronous code in a browser:

// DANGER: This freezes the entire page for 5 seconds
function fetchDataSync() {
  const start = Date.now();
  while (Date.now() - start < 5000) {
    // Do nothing for 5 seconds (simulating a slow network request)
  }
  return { data: "Here is your data" };
}

console.log("Fetching...");
const result = fetchDataSync();  // Page is FROZEN here
console.log("Done:", result);

During those 5 seconds, users cannot click anything, scroll, or interact with the page. This is unacceptable for modern web applications.

The Server-Side Problem

On servers, blocking is equally destructive. A Node.js server handles many client requests on a single thread. If one request triggers a blocking operation, every other request waits:

const http = require('http');

const server = http.createServer((req, res) => {
  // BLOCKING: Every request waits for this to finish
  const data = readFileSync('huge-file.txt');  // Takes 2 seconds
  res.end(data);
});

// Request 1 arrives → Blocks for 2 seconds
// Request 2 arrives during that time → Waits
// Request 3 arrives → Waits
// Request 100 arrives → Waits 200 seconds!

Everyday Examples: Waiting for Data

Example 1: Making Coffee (Timer)

Synchronous approach (bad):

function makeCoffeeSync() {
  console.log("1. Start brewing");

  // BLOCKING: Stand and watch the coffee machine for 3 minutes
  const start = Date.now();
  while (Date.now() - start < 3000) {} // Simulating 3 seconds

  console.log("2. Coffee ready");
  console.log("3. Drink coffee");
}

makeCoffeeSync();
// During brewing, you can do NOTHING else

Asynchronous approach (good):

function makeCoffeeAsync() {
  console.log("1. Start brewing");

  // NON-BLOCKING: Set a timer, move on immediately
  setTimeout(() => {
    console.log("2. Coffee ready (timer rang)");
  }, 3000);

  console.log("3. While waiting: Read a book");
  console.log("4. While waiting: Check emails");
}

makeCoffeeAsync();
// Output:
// 1. Start brewing
// 3. While waiting: Read a book
// 4. While waiting: Check emails
// [3 seconds later]
// 2. Coffee ready (timer rang)

Example 2: Ordering Food (API Call)

Synchronous approach (impossible in real web apps):

function orderFoodSync() {
  console.log("1. Placing order");

  // BLOCKING: Stare at the phone waiting for the restaurant
  const food = makeNetworkRequestSync(); // Takes 10 seconds

  console.log("2. Food arrived:", food);
  console.log("3. Eat");
}

orderFoodSync();
// You sit doing nothing for 10 seconds

Asynchronous approach (how real apps work):

function orderFoodAsync() {
  console.log("1. Placing order");

  // NON-BLOCKING: Place order, provide callback for when ready
  placeOrder((food) => {
    console.log("3. Food arrived:", food);
    console.log("4. Eat");
  });

  console.log("2. While waiting: Watch a video");
}

orderFoodAsync();
// Output:
// 1. Placing order
// 2. While waiting: Watch a video
// [10 seconds later]
// 3. Food arrived: Pizza
// 4. Eat

Example 3: Fetching Weather Data (Real API)

// SYNCHRONOUS (hypothetical — this would freeze everything)
const weather = fetchWeatherSync('New York');  // Blocks 500ms
console.log(weather.temperature);

// ASYNCHRONOUS (how it actually works)
fetchWeatherAsync('New York')
  .then(weather => {
    console.log(weather.temperature);
  });
console.log("Loading weather...");  // This prints immediately

Problems That Occur with Blocking Code

Problem 1: Frozen User Interfaces

// In a browser, this freezes the page
function calculateHeavy() {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

button.addEventListener('click', () => {
  const result = calculateHeavy();  // Page freezes here
  displayResult(result);
});

User experience:

User clicks button
Page stops responding
Animations freeze
User thinks the browser crashed
After 3 seconds, result appears suddenly

Problem 2: Server Request Pile-Up

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
  // BLOCKING: Synchronous file read
  const data = fs.readFileSync('database.json');
  res.end(data);
});

server.listen(3000);

What happens under load:

Request 1 arrives at 0ms    → Starts reading file (takes 100ms)
Request 2 arrives at 10ms     → WAITS (Request 1 still reading)
Request 3 arrives at 20ms     → WAITS
Request 4 arrives at 30ms     → WAITS
...
Request 1 finishes at 100ms   → Request 2 starts
Request 2 finishes at 200ms   → Request 3 starts
Request 3 finishes at 300ms   → Request 4 starts

Request 100 arrives at 990ms → Starts at 9900ms (waits 8.9 seconds!)

With 100 requests and 100ms file reads, the last request waits almost 10 seconds. Users abandon the site.

Problem 3: Resource Waste

// Blocking code wastes CPU cycles
function syncOperation() {
  const result = database.querySync();  // CPU does nothing for 50ms
  return process(result);               // CPU works for 1ms
}

// 50ms of CPU time wasted per request
// 1000 requests = 50 seconds of wasted CPU time

The CPU is the most expensive resource. Blocking code leaves it idle while waiting for slower components (disk, network, database) to respond.

Problem 4: Cascading Timeouts

// In a chain of blocking operations, delays multiply
function handleRequest() {
  const user = db.querySync('SELECT * FROM users');      // 50ms
  const orders = db.querySync('SELECT * FROM orders');   // 50ms
  const items = db.querySync('SELECT * FROM items');      // 50ms
  return { user, orders, items };
}
// Total: 150ms blocked per request

With asynchronous code, these three queries can run in parallel, completing in ~50ms instead of 150ms.

Blocking vs Non-Blocking: Side by Side

The Same Task, Two Ways

Task: Read a file, process it, and print a message.

Blocking (Synchronous):

const fs = require('fs');

console.log("Starting...");

const data = fs.readFileSync('data.txt', 'utf8');  // BLOCKS here
console.log("File content:", data);

const processed = data.toUpperCase();  // Also blocks briefly
console.log("Processed:", processed);

console.log("Done!");

// Execution: Start → [wait for disk] → Read → Process → Done
// Nothing else can happen during the disk wait

Non-Blocking (Asynchronous):

const fs = require('fs').promises;

console.log("Starting...");

fs.readFile('data.txt', 'utf8')
  .then(data => {
    console.log("File content:", data);
    return data.toUpperCase();
  })
  .then(processed => {
    console.log("Processed:", processed);
  });

console.log("Done! (but file still loading in background)");

// Execution: Start → Schedule read → Print "Done!" → [CPU free] → Read completes → Process → Print
// CPU was free to do other work between Start and Read completion

Visual Comparison

BLOCKING CODE                          NON-BLOCKING CODE
─────────────────                      ─────────────────

Time →                                 Time →
│                                      │
├─ Start ──────────────────────────→   ├─ Start ──────────────────────────→
├─ [BLOCKED: waiting for disk] ────→   ├─ Schedule read ──────────────────→
├─ [BLOCKED: waiting for disk] ────→   ├─ Print "Done!" ──────────────────→
├─ [BLOCKED: waiting for disk] ────→   ├─ [CPU FREE: other work possible] ─→
├─ Read file ──────────────────────→   ├─ [CPU FREE: other work possible] ─→
├─ Process ────────────────────────→   ├─ Read completes ─────────────────→
├─ Print result ───────────────────→   ├─ Process ──────────────────────────→
│                                      ├─ Print result ─────────────────────→
│                                      │
│ Nothing else can run here            │ Other code ran here while waiting

Summary

Concept	Synchronous	Asynchronous
Execution	One line at a time, in order	Moves on immediately, callbacks handle completion
Waiting	Blocks until operation completes	Never blocks, schedules background work
CPU usage	Idle during I/O waits	Free to do other work during I/O
User experience	Frozen UI, slow servers	Responsive UI, scalable servers
Code style	Straightforward, top-to-bottom	Callbacks, promises, async/await
Best for	Simple scripts, CPU calculations	I/O operations, user interfaces, servers

JavaScript's single-threaded nature makes asynchronous code not just a preference but a necessity. Without it, browsers freeze and servers collapse under load. The asynchronous model — scheduling work, continuing execution, and responding to completion events — is what allows JavaScript to build responsive user interfaces and handle thousands of simultaneous server requests with elegance rather than brute force.

Remember: Synchronous code is like cooking one dish at a time, standing idle while water boils. Asynchronous code is like a professional kitchen where timers, callbacks, and coordination allow multiple dishes to progress simultaneously while the chef's attention moves efficiently between tasks.

DEV Community