JavaScript Event Loop & Browser Internals ----> A Deep but Practical Guide for Frontend Engineers

 The Core Problem JavaScript Solves

JavaScript runs in the browser and must:

• Respond to user clicks

• Fetch data from servers

• Animate UI

• Handle timers

• Update the screen

But…

JavaScript is single-threaded

That means:

• One call stack

• One task at a time

• No true parallel execution

So how does the browser avoid freezing the UI?

👉 By splitting responsibilities between JavaScript Engine, Browser, and the Event Loop

2. High-Level Browser Architecture

Before the event loop, you must understand where JavaScript actually runs.

Here you can have a look on  Browser Architecture Overview

Note:

• JavaScript does NOT do everything

• Browser provides async powers via Web APIs

JavaScript Engine & Call Stack (Foundation)

The JavaScript Engine (V8, SpiderMonkey) contains:

• Memory Heap

• Call Stack

Call Stack Rules

• Executes code line by line

• Uses LIFO (Last In, First Out)

Example:

function greet() {

  sayHello();

}

function sayHello() {

  console.log("Hello");

}

greet();

Have a look on Call Stack Execution

Execution finishes → stack becomes empty.

4. What Happens With Async Code?

Let’s introduce a timer.

Example:

console.log("Start");

setTimeout(() => {

  console.log("Timeout");

}, 2000);

console.log("End");

Expected output:

Start

End

Timeout

5. Web APIs (Browser Superpowers)

setTimeout is not JavaScript

It is handled by the browser’s Web APIs

Have a look on Web API Handling

JavaScript:

• Registers the timer

• Immediately continues execution

• Does NOT wait

6. Macrotask (Callback) Queue

When the timer finishes:

• The callback is placed into the Macrotask Queue

Have a look on Macrotask Queue

But It cannot execute immediately

Why?

👉 The call stack must be empty
👉 Event Loop must allow it

The Event Loop (The Traffic Controller)

The Event Loop constantly checks:

1. Is Call Stack empty?

2. Are Microtasks pending?

3. Can I push the next task?

Here is the picture how actually event loop cycle works

This loop runs continuously

8. Microtask Queue (High Priority)

Microtasks execute before macrotasks.

Microtasks include:

• Promise .then

• Promise .catch

• async/await

• queueMicrotask

Example:

console.log("A");

setTimeout(() => {

  console.log("B");

}, 0);

Promise.resolve().then(() => {

  console.log("C");

});

console.log("D");

Execution Flow

1. A → Call Stack

2. setTimeout → Web API

3. Promise → Microtask Queue

4. D

5. Microtasks executed

6. Macrotask executed

Output:

A
D
C
B

Here have a look on Dual Queue Priority 



9. async / await (Internals Explained)
async/await is syntactic sugar over Promises
async function test() {
  console.log("1");
  await Promise.resolve();
  console.log("2");
}

test();
console.log("3");
What actually happens?
console.log("1") → runs immediately
await pauses function
Remaining code goes to Microtask Queue
Output:
1
3
2

Async/Await Flow :

Call Stack → await → Microtask Queue → Call Stack

10. Rendering & Event Loop Relationship
The browser renders between tasks, not during execution.
Rendering includes:
Style calculation
Layout (reflow)
Paint
Composite
Rendering Time:

JS Task → JS Task → (Render) → JS Task → (Render)

Blocking Example
button.onclick = () => {
  const start = Date.now();
  while (Date.now() - start < 5000) {}
};
Result:
UI freezes
No rendering
No input response
11. requestAnimationFrame (Bonus)
Used for smooth animations.
requestAnimationFrame(() => {
  element.style.transform = "translateX(100px)";
});
Runs:
Before repaint
In sync with browser refresh rate
12. Browser vs Node.js Event Loop


13. Common Developer Misconceptions
❌ setTimeout(0) runs immediately

❌ Promises are multithreaded

❌ async/await blocks JS

❌ Browser renders during JS execution
14. Why This Knowledge Matters
After understanding this:
You write non-blocking code
You debug async bugs faster
You optimize rendering


✍️ About the Author
Jyothsna Dannana is a Frontend Engineer with strong experience in building scalable,
high-performance web applications using JavaScript, TypeScript, Angular, and
modern frontend architectures.She enjoys diving deep into browser internals, performance 
optimization, frontend security,and system design, and believes that understanding how things
work under the hood is what separates good developers from great engineers.Through her writing,
she aims to simplify complex frontend concepts into clear,practical explanations that help 
developers grow with confidence and build better user experiences.