Demystifying the JavaScript Event Loop: How Asynchronous Processing Works

How JavaScript Asynchronous Processing Actually Works

The JavaScript runtime utilizes a single-threaded execution model. This means only one piece of code can execute at any given time via the Call Stack.

Why This Matters

While developers often treat async/await as magic, the technical reality is a complex coordination between Web APIs and two distinct queues. Misunderstanding this leads to sequential bottlenecks where operations that could run in parallel are awaited one by one, increasing total latency and degrading application performance.

Key Insights

• Priority Execution: The Event Loop executes all Microtasks (e.g., Promise.then) before moving to the next Task (e.g., setTimeout), ensuring high-priority asynchronous callbacks resolve first.
• Async Transformation: An ‘async’ function always returns a Promise; internally, ‘await’ splits a function into two parts, pushing subsequent code into the Microtask Queue.
• Concurrency Control: Parallelism is determined by when a Promise is initiated rather than when it is awaited, as seen in patterns like Promise.all().
• Runtime Delegation: Functions like setTimeout are not handled by the JS engine but are delegated to Web APIs provided by the browser or runtime environment.

Working Examples

Demonstrates priority order: Synchronous code first, then Microtasks (Promises), then Tasks (setTimeout).

console.log("start");
setTimeout(() => { console.log("timeout"); }, 0);
Promise.resolve().then(() => { console.log("promise"); });
console.log("end");

Comparison between sequential awaiting and parallel execution using Promise.all.

// Sequential (Slower)
const a = await fetchA();
const b = await fetchB();

// Parallel (Faster)
const [a, b] = await Promise.all([ fetchA(), fetchB() ]);

Practical Applications

• । Use Case: Utilizing Promise.all() for multiple API calls to initiate requests simultaneously rather than sequentially.
• । Pitfall: Awaiting promises individually in a sequence, which results in unnecessary blocking and increased execution time.

References:

• https://dev.to/bysontech_8dd1313811a8895/how-javascript-asynchronous-processing-actually-works-1m1d