EmmEEdu
ECMAScript Standard & V8 Engine

JavaScript & The Event Loop

JavaScript is single-threaded, non-blocking, and asynchronous. Step through how the V8 engine JIT compiler, Call Stack, Web APIs, and Microtask queues work in unison.

JavaScript Event Loop Visualizer

V8 Engine Runtime

Step through Call Stack, Web APIs, Microtask Queue (Promises), and Macrotask Queue (Timers).

script.jsStep 0 / 14
1console.log("1: Sync Start");
2setTimeout(() => console.log("2: setTimeout Task"), 0);
3Promise.resolve().then(() => console.log("3: Promise Microtask"));
4queueMicrotask(() => console.log("4: queueMicrotask"));
5console.log("5: Sync End");
Console Output
No output printed yet...
Call Stack (LIFO)
0 frame(s)
Stack is Empty
Single threaded synchronous
Web APIs / Node Environment
No active background workers
Timer threads & I/O
Event Loop State:IDLE
Microtask Queue (VIP)
0
Empty
Promises, queueMicrotask, MutationObserver
Task Queue (Macrotasks)
0
Empty
setTimeout, setInterval, setImmediate, I/O

Click 'Play' or 'Step Forward' to begin stepping through the JavaScript runtime execution cycle.

Compiler Architecture

V8 Engine JIT Compilation Pipeline

How Chrome & Node.js parse JavaScript source code into an Abstract Syntax Tree (AST), Bytecode (Ignition), and Optimized Machine Code (TurboFan).

Execution Architecture Simulator

JavaScript (V8 / Event Loop)

From human-readable script to bytecode and optimized machine code running within the single-threaded Event Loop.

Step 1 of 10:1. Source Code
Stage 1
1. Source Code
Script Payload
Stage 2
2. Scanner & Parser
Lexical Analysis
Stage 3
3. Abstract Syntax Tree (AST)
Structural Tree
Stage 4
4. Ignition (Bytecode)
Interpreter
Stage 5
5. TurboFan (JIT Compiler)
Optimizing Compiler
Stage 6
6. Call Stack
LIFO Execution
Stage 7
7. Web APIs / Libuv
Asynchronous Offload
Stage 8
8. Microtask Queue
Promise Priority Queue
Stage 9
9. Task Queue (Macrotasks)
Event Queue
Stage 10
10. Event Loop Coordinator
Heart of JavaScript
1. Source Code
JIT-Compiled Event-Driven Asynchronous Runtime

Raw UTF-8 JavaScript source text received from network or file system.

Under the Hood:
  • →Streaming parser feeds source directly into memory
  • →UTF-16 encoding normalization
Internal Representation / State:
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Microtask"));
Lexical Scope & Closures

Functions in JavaScript retain access to their outer lexical environment even after the parent function has finished executing and returned.

function makeCounter() {
  let count = 0;
  return () => ++count;
}
Promises & Async / Await

Syntactic sugar over the Microtask queue. `await` pauses execution of the async function body, releasing the main thread until the Promise settles.

const res = await fetch(url);
const data = await res.json();
Garbage Collection (Orinoco)

Generational garbage collection (Scavenger for young generation, Mark-Sweep-Compact for old generation) operating concurrently in background threads.

Generational Hypothesis: Most objects die young.