DEV Community

Cover image for 🚀⚙️Deep Dive in to JavaScript Engine - (Chrome V8)
Edison Augusthy
Edison Augusthy

Posted on • Updated on

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

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.

Alt Text

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

Alt Text

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

Alt Text

  1. 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.
  2. AST(Abstract Syntax Tree)
    The parser creates nodes based on the tokens it gets. With these nodes, it creates an Abstract Syntax Tree (AST).

  3. 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.

  4. Profiler
    The Profiler monitors and watches code to optimize it.

  5. 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.

v8 overview

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)

Collapse
 
prabakarankaruppannan profile image
Prabakaran Karuppannan • 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

Collapse
 
edisonpappi profile image
Edison Augusthy

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

Collapse
 
luiz0x29a profile image
Real AI

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.

Collapse
 
prabakarankaruppannan profile image
Prabakaran Karuppannan

Thanks for the explanation.

Collapse
 
lyavale95 profile image
LyAVALE95

THANK YOU for this article!!

Collapse
 
edisonpappi profile image
Edison Augusthy

thank you

Collapse
 
andyoverlord profile image
Andy Zhu

Thank you, explained well.

Collapse
 
edisonpappi profile image
Edison Augusthy

thank you

Collapse
 
edimeri profile image
Erkand Imeri

Thanks for the article, very informative.

What kind of tool do you use for those diagram drawings?

Collapse
 
edisonpappi profile image
Edison Augusthy

I use excalidraw.com to create images and google slides for gif animations