Google's V8 JavaScript Engine Architecture Explained

Google's V8 JavaScript Engine Architecture Explained

V8 is Google's JavaScript engine. It powers Chrome, Node.js, Deno, and Electron. Understanding its architecture makes you a better JavaScript developer.

V8's Core Components

1. Parser: converts source code into an AST (Abstract Syntax Tree).
2. Ignition (Interpreter): compiles the AST into bytecode and executes it. Fast startup.
3. TurboFan (Optimizing Compiler): compiles hot (frequently executed) bytecode into optimized machine code. High performance.
4. Orinoco (Garbage Collector): reclaims unreachable memory on the heap.
5. Call Stack: where function calls are tracked (one at a time).
6. Heap: where objects and arrays are stored.

The Pipeline

Source Code → Parser → AST → Ignition (bytecode) → Execution
                                      ↓ (hot code detected)
                                  TurboFan (optimized machine code)
                                      ↓ (assumption broken)
                                  Deoptimization → back to bytecode

JIT Compilation

V8 uses Just-In-Time compilation: it compiles code at runtime, not ahead of time.

• Ignition generates bytecode quickly so execution can start fast.
• TurboFan watches for hot code (functions called many times) and recompiles it to optimized machine code.
• If an assumption breaks (e.g., an object's shape changes), V8 deoptimizes and falls back to bytecode.

Hidden Classes

V8 assigns "hidden classes" to objects based on their shape (property names and order). Objects with the same hidden class can share optimized code paths.

// good: same hidden class
const a = { x: 1, y: 2 };
const b = { x: 3, y: 4 };

// bad: different hidden classes (deoptimization)
const c = { x: 1, y: 2 };
const d = { y: 2, x: 1 }; // different property order
const e = { x: 1 };       // missing property
``
### Inline Caching

V8 caches the memory locations of properties accessed in hot functions. If the hidden class stays stable, the cache is valid and access is fast. If the hidden class changes, the cache is invalidated and the function deoptimizes.

### Garbage Collection (Orinoco)

V8 uses **generational mark-and-sweep**:

- **Young generation**: new objects. Collected frequently (scavenge).
- **Old generation**: objects that survived multiple young-gen collections. Collected less frequently (mark-sweep).
- **Orinoco**: incremental, concurrent GC that minimizes pause times.

### The Call Stack

V8 has one call stack. One function runs at a time. The event loop (provided by the browser or libuv in Node.js) moves async callbacks to the stack when it is empty.

### The Heap

Objects and arrays are stored on the heap. Variables hold references to heap objects. The GC reclaims unreachable objects.

### Other JS Engines

- **SpiderMonkey** (Firefox): similar pipeline, different optimizers.
- **JavaScriptCore** (Safari): uses multiple tiers (LLInt, Baseline, DFG, FTL).
- All follow the ECMAScript spec but optimize differently.

### The Takeaway

V8 parses source into an AST, Ignition compiles it to bytecode for fast startup, and TurboFan optimizes hot code to machine code. Hidden classes and inline caching make property access fast. Orinoco is the generational GC. The call stack is single-threaded; the event loop (from the host) handles async. Understanding V8 explains why consistent object shapes and stable hot code are fast.