How V8 runs your JavaScript

Chapter 1

What is V8?

Your computer's processor (the CPU) doesn't understand JavaScript. It only understands machine code: very simple instructions stored as 0s and 1s. V8 is a JavaScript engine, a program that translates your JavaScript into machine code and runs it.

Your task

Press Translate and watch V8 turn code into something the CPU can run.

To do

Your JavaScript

console.log("Hi!")

V8

What the CPU gets (simplified)

waiting…

Four quick facts (click a card to flip it)

Key idea

V8 is both a translator and a runner. It takes JavaScript, which is written for humans, and turns it into machine code, which is written for CPUs.

Chapter 2

Parsing: how V8 reads your code

Before V8 can run anything, it has to understand it. First the scanner chops your code into tokens, like words in a sentence. Then the parser arranges the tokens into a tree called an AST (Abstract Syntax Tree) that shows how everything fits together.

Your task

Parse a line of code and build its tree. Then try the broken example to see a SyntaxError.

To do

Examples:

Step A: tokens (the scanner splits the text)

Press Parse to start.

keyword identifier (a name) number string operator or punctuation

Step B: the tree (the parser builds the AST)

The tree will appear here.

Key idea

Look at 10 + 5 * 2 in the tree. The * sits lower than the +, so it's calculated first. The tree is how V8 knows the order of operations. If the code breaks the grammar rules, the parser stops with a SyntaxError and nothing runs.

Chapter 3

The pipeline

After parsing, your code travels through a series of stations. V8 has four ways to run code, from "start right now" to "run as fast as possible". Use Next to follow the journey.

Your task

Go through every station of the pipeline.

To do

The trade-off: start fast or run fast?

Each station trades how quickly it can start running code against how fast the code runs once it's ready. The bars are illustrative.

Start-upTop speed Ignition

Sparkplug

Maglev

TurboFan

Analogy

Ignition is like cooking while reading the recipe line by line: you can start right away, but it's slow. TurboFan is like a chef who has made the dish a thousand times and knows every move by heart. It's much faster, but only worth it for dishes you cook all the time.

Chapter 4

Hot code and the JIT

V8 is a JIT (Just-In-Time) engine: it compiles code while your program runs. It watches which functions run a lot. Those are called hot. The hotter a function gets, the more effort V8 puts into making it fast.

Your task

Call add() until TurboFan takes over, then break its assumption by passing a string.

To do

The function

function add(a, b) { return a + b; }

waiting for the first call…

Heat0 calls · cold

Sparkplug Maglev TurboFan

The thresholds and speeds here are simplified. Real V8 uses smarter rules.

Speed

1× speedIgnition (interpreter)

Ignition

Sparkplug

Maglev

TurboFan

Key idea

TurboFan makes code fast by guessing, for example "a and b are always numbers". If a guess turns out wrong, V8 deoptimizes and goes back to slower bytecode. Your code still works, but it loses speed. That's why it helps to keep the types you pass to a function consistent.

Chapter 5

Object shapes (hidden classes)

Finding player.x by searching through every property would be slow. So V8 secretly gives every object a shape, also called a hidden class, that records exactly where each property is stored. Objects with the same shape share the same fast lookups.

Your task

Give both objects the same properties. Try the same order first, then reset and try a different order.

To do

Shape transition tree

Analogy

A shape is like a locker map. If you and a friend use the same map ("books in slot 1, laptop in slot 2"), anyone can grab your stuff instantly. If your maps are different, they have to check every time.

Inline caches

When V8 runs p.x, it remembers "for shape S2, x is in slot 0". The next time it sees an object with shape S2, it jumps straight there without searching.

Key idea

Same properties in the same order means the same shape, which means faster code. A good habit: create objects with all their properties at once, like { x: 1, y: 2 }, or in a class constructor.

Chapter 6

Garbage collection

Every object you create takes up memory. When your code can't reach an object anymore, it's garbage. V8's garbage collector, called Orinoco, finds that garbage and frees the memory, so you never have to do it yourself.

Your task

Create garbage by deleting references, then clean it up with both a minor GC and a major GC.

To do

Reachable means safe

V8 starts from the root (global variables and the variables of functions that are running right now) and follows every arrow. Anything it reaches stays. Anything it can't reach is deleted.

Most objects die young

So memory is split in two. New objects go to the small young generation, which is cleaned often and quickly (minor GC). Objects that survive two cleanups move to the old generation, which is cleaned less often (major GC).

Click an object to delete the arrow pointing to it, like writing player = null. The dots under young objects count how many GCs they've survived.

Create objects, delete references, then run the garbage collector.

Key idea

In JavaScript you never delete objects yourself. You just stop pointing to them, and V8 cleans up. V8 does much of this work on background threads, so your game or website doesn't freeze while it cleans.

Chapter 7

Final quiz

Nine questions on everything above. You'll see an explanation after each answer.