Inside the V8 Engine
There are different Javascript engines used in various browsers (SpiderMonkey in Firefox, JavaScriptCore in Safari, Chakra in Edge, etc.) and all those engines implement the ECMA ES-262 standard, also called ECMAScript, the standard used by JavaScript. But the V8 engine, developed by Google in C++, remains the most powerful and is used in Google Chrome and Node.js. This engine is the tool that takes our JavaScript and executes it while browsing with Chrome. As JavaScript engine is independent of the browser, in which it’s hosted, it enabled the rise of Node.js by providing an incredible amount of server-side code.
JS Engine Process
Parser
After we download the source code, we need to change it in a way that the compiler can understand. This process is called parsing and consists of two parts: the scanner and the parser itself. The HTML parser encounters a script tag with a source. The source code inside this script gets loaded as a UTF-16 byte stream to a byte stream decoder. This byte stream decoder then decodes the bytes into token which are sent to the parser. The engine tries to avoid parsing code that’s not necessary right away in order to save time.
AST
In the next process an Abstract Syntax Tree (AST) is created with nodes that parser creates based on the tokens it receives.
Interpreter
This step goes through AST and generates byte code in the end. The code is read line by line. AST gets deleted during the process generating byte code, while clearing up memory space. V8 uses an interpreter called Ignition. It has something called an accumulator — a place where you can store/read values.
Profiler
The Profiler monitors and watches code to optimize it. Code that can be optimized is getting passed to the Just-In-Time (JIT) compiler, so it can be compiled and run faster.
Optimizing Compiler
Ignition and profiler do not take us so far. When a function gets hot enough, compiler will optimize it to make and work it faster. The compiler creates a translation of the code that has been written until profile and creates a more machine readable lower level language. Modern examples of compilers include Babel and TypeScript (strict syntactical superset of JavaScript and adds optional static typing to the language).
Optimized Code
The final result that you see in your browser after the whole process is called optimized code. The optimizing compiler makes certain assumptions based on it and then produces highly-optimized machine code. If, at some point, one of the assumptions turns out to be incorrect, the optimizing compiler de-optimizes and goes back to the interpreter.
Key takeaways from this process should be that V8 engine is the backbone of Google Chrome and other Chromium-based web browsers and it is distinct from other JS engines as it directly converts scripts to machine code without producing intermediate code.
