How does your web browser run Javascript?

A quick summary

Photo by Claudio Schwarz on Unsplash

Questions on web browsers are frequently asked in interviews. For example, the process of loading a webpage in a browser from the moment a URL is entered is one of the most asked interview questions.

Here, let’s talk specifically about how JavaScript (JS) runs.

JS is a client-side scripting language. This means your browser (aka the client) runs it. How?

Every browser comes with a JS Engine which also acts like a virtual machine that helps us run the code.

Did you know that different browsers use different JS engines?

👉🏻 Chrome uses V8

👉🏻 Edge uses Chakra

👉🏻 Firefox uses Spider monkey

Here’s a simplified summary of what happens:

• The JS engine locates the script/JS code, checks the syntax, and parses it into an Abstract Syntax Tree (AST). Think of it as a tree-like representation of the code. This step is done by a “ parser ”.
• The AST is converted into bytecode and run by an interpreter. In the case of the V8 engine, the interpreter is called “ ignition ”.
• The bytecode and the profiling data generated while running it is passed to a Just in time (JIT = compilation during runtime) compiler that can produce highly optimized machine code.
• In the case of the V8 engine, the compiler is called “ Turbofan ”.
• In the case of Chakra and Spider monkey, there are some differences in these steps and they use two optimizing compilers.

The rest of the steps and architecture in most JS engines are similar.

I hope you got a good overview.

Here are some links for more in-depth exploration:

• A crash course in just-in-time (JIT) compilers - Mozilla Hacks - the Web developer blog
• How JavaScript Works: Under the Hood of the V8 Engine
• JavaScript engine fundamentals: Shapes and Inline Caches

This content was first published by me here.