🚀⚙️Deep Dive in to JavaScript Engine - (Chrome V8)

#javascript #react #angular #vue

The web browser are the main part of internet world. When ever we type a URL in the address bar, it fetch resources from remote server, and display them on the screen, through this time it mainly undergoes 3 process

Fetch
Process
Display

At first it fetching data from subsequent web servers via the internet.

Then the Render engine, will process the received resourses. After that the Browser Engine will performs data presentation.

so how all this happen...?

To know better about these processes, we should know how a browser process JavaScript . And that is done by JavaScript engines.

A JavaScript engine is a program or an interpreter which executes JavaScript code. JS is a higher level dynamic language and it has no way to directly interact with our machines lower level logic. So JavaScript engine can be implemented as a standard interpreter, or just-in-time compiler that compiles JavaScript to bytecode in some form . see the high level overview of the js engine in below image

Parser The Html Parser will fetch all scripts loaded via <script> tag. 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 and then its sent to parser.
AST(Abstract Syntax Tree)
The parser creates nodes based on the tokens it gets. With these nodes, it creates an Abstract Syntax Tree (AST).
Interpreter
The interpreter walks through the AST and generates byte code. It reads the code line by line. When the byte code has been generated, the AST is deleted for clearing up memory space.
Profiler
The Profiler monitors and watches code to optimize it.
Compiler
The compiler works ahead of time and creates a translation of the code that has been written and compiles down to a lower level language that machines can read.

We have seen different components of js engine . Now lets check what are the Different JavaScript engines available..

V8 — open source, developed by Google, written in C++
Rhino — managed by the Mozilla Foundation, open source, developed entirely in Java
Spider Monkey — the first JavaScript engine, which back in the days powered Netscape Navigator, and today powers Firefox
JavaScriptCore — open source, marketed as Nitro and developed by Apple for Safari
KJS — KDE’s engine originally developed by Harri Porten for the KDE project’s Konqueror web browser
Chakra (JScript9) — Internet Explorer
Chakra Core(JavaScript) — Microsoft Edge (Now uses v8)
Nashorn, open source as part of OpenJDK, written by Oracle Java Languages and Tool Group
JerryScript — is a lightweight engine for the Internet of Things.

V8

The V8 Engine which is built by Google is open source and written in C++. This engine is used inside Google Chrome. V8 is also used for the popular Node.js And Deno. To obtain High performance, V8 translates JavaScript code into more efficient machine code instead of using an interpreter. Even though Most modern JavaScript engines has the same approach, but V8 stand out is that it does not produce any intermediate code.

HOW V8 WORKS

V8 compiles JavaScript code into machine code at execution by implementing a JIT (Just-In-Time) compiler. A JIT compiler takes the benefits from both the traditional compiler and an interpreter and mixes them together.

When V8 compiles JavaScript code, the parser generates an AST (abstract syntax tree). A syntax tree is a tree representation of the syntactic structure of the JavaScript code. Ignition, the interpreter, generates bytecode from this syntax tree. TurboFan, the optimizing compiler, eventually takes the bytecode and generates optimized machine code from it.

Lets check v8's 2 main pipelines behind its performance Ignition interpreter and the compiler Turbofan little bit more

Ignition

The interpreter in v8 is called Ignition. The interpreter generates the byte-code. This is good for code that only needed to run only once. The byte-code runs inside the JavaScript engine itself. Interpreted code is falser to get something running but is a bit slower. Ignition resolve overhead memory consumption by achieving three objectives

reducing memory usage
reducing startup time
reducing complexity

TurboFan

The TurboFan pipeline follows some steps to translate bytecode into machine code. Optimizations in the pipeline are performed based on feedback collected by Ignition.

TurboFan’s online, JIT-style compilations and optimizations concludes V8’s translation from source code to machine code.

Sometimes, we may have repeated code blocks. The JavaScript compilers run feedback and collect profiling data for the code being executed. If it comes across the function that is being called with the same type of parameters every time and has been called multiple times, this code goes through TurboFan. The TurboFan produces highly optimized machine-level code which runs directly on the CPU for the hot code. TurboFan only kicks in when JS engine detects a code to be hot. A code is hot when it runs quite often, runs inside a loop, etc. The compiled code has direct CPU instructions and is quite faster.

Top comments (10)

Prabakaran Karuppannan • Sep 8 '20 • Edited

Hi Edison,

You mentioned that V8 translates Javascript code to more efficient machine code without using an interpreter.

But in the bottom, you introduced V8 Ignition(Intrepreter), Turbofan(Compiler) which does same.

So which one correct statement? V8 using intrepreter or not? Can you explain?

Thanks

Edison Augusthy • Sep 8 '20

Thanks for pointing out mistakes

Actually V8 use JIT (Just-In-Time) compiler, it doesn't follow traditional way of using Interpreter,
For JIT compilation v8 uses a pipeline called Ignition which is also called as Ignition interpreter

Real AI • Sep 24 '20

Didn't they add an Interpreter back because its faster for code that will run only once?
I would say V8 actually does both interpretation and compilation and can switch between them whenever is needed.