Parse, compile, and run JavaScript

The browser can’t run JavaScript source directly. The engine first parses the text, checking the syntax and turning it into an internal representation of the program.

This is why a syntax error stops the whole script, not just the broken line:

console.log('before')

function broken( {

console.log('after')

Neither log runs. Not even the first one, which looks fine. Parsing failed, so there was no valid program to execute. If you’ve ever added a script and seen nothing happen at all, this is usually the reason. Check the Console for a SyntaxError.

From parsed code to running code

After parsing, the engine produces bytecode, a compact instruction format it can execute right away. In V8 this is done by an interpreter called Ignition.

Then it watches. Code that runs often gets a second pass: an optimizing compiler, TurboFan in V8, produces specialized machine code based on what the engine observed at runtime. That’s the just-in-time compilation we saw in the previous lesson.

These names are V8 specifics. Other engines have their own pipeline with different names, and V8 itself changes its pipeline every few years. Don’t write code that depends on one engine’s internals. Write clear code and measure.

What costs time on the main thread

For page performance, this is the sequence that matters:

1. Download the script.
2. Parse and compile it.
3. Execute the top-level code.
4. Run functions later, when events, timers, or promises call them.

Steps 2 and 3 run on the main thread. A small compressed file can still be expensive if it expands to a lot of code to parse, or if it does heavy work at the top level as soon as it runs.

A 30 KB gzipped bundle can be 150 KB of JavaScript once decompressed. The network sees 30. The parser sees 150.

See it in DevTools

Open the Performance panel and record a page load. On the Main track, expand a task related to your script. You’ll see Compile Script and Evaluate Script entries, and below them the functions your top-level code called.

Then block that script with the Network request blocking tool and record again. Compare the two Main tracks. Now you know what the script costs the main thread, not just what it costs the network.