The JavaScript engine

Parse, compile, and run JavaScript

Follow source code through parsing, bytecode generation, execution, and later optimization.

8 minute lesson

~~~

The browser cannot run JavaScript source directly. The engine first parses the text and turns it into an internal representation of the program.

This is why a syntax error stops the affected script before its statements run:

console.log('before')

function broken( {

console.log('after')

Neither log runs. Parsing the script failed, so there was no valid program to execute.

After parsing, an engine can produce bytecode or machine code and start executing it. Frequently executed code may later receive a more specialized compiled version. The exact pipeline differs between engines and changes over time, so application code should not depend on one engine’s internal compiler names.

What matters for page performance is the work that reaches the main thread:

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

A small compressed file can still be expensive if it contains a lot of code to parse or executes substantial work immediately.

Open DevTools, record a page load in the Performance panel, and inspect the main-thread track. Expand a script-related task and distinguish evaluation from later function calls. Then disable that script temporarily and record again. This connects the source file to actual main-thread cost instead of judging it only by download size.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →