• Category
  • >JavaScript

Revisiting the Basics: What’s Inside JavaScript Engine?

  • Abhay Pratap
  • Jul 03, 2020
Revisiting the Basics: What’s Inside JavaScript Engine? title banner


In this ever-changing world, where new frameworks come almost every other day, it becomes extremely important that we never forget the basics. ‘Revisiting the basics’ is a series of posts designed for experienced developers who want to refresh their knowledge of core concepts of JavaScript and for young developers who want to understand how js actually works behind the scenes.

 

This post is catered to the inside of the JS engine. We will seek answers to the following questions:

 

  1. What are the components of the JS engine?

  1. Does JavaScript Engine compile or Interpret the code?

  1. How knowing about working itself can help us write optimized code?

 

The first prototype of the JavaScript engine was written way long back by Brendan Eich in 1995 for Netscape Navigator Web Browser, and surprisingly he did it in 10 days!

JavaScript has evolved so much from its first initial prototype version and each version is implemented on top of the ECMAScript standards. 

 

Before 2008, almost all the engines were interpreting the code, that is they don’t compile the code beforehand, rather they process it line by line. 

 

Well, it was good to start with but the demand for performance increased significantly and mere interpreting would not work anymore. That’s when google released its chrome V8 engine and it provided a significant boost to the browser’s performance and changed the landscape of client-side scripting forever. 

 

Other JS engine implementations include Apple Safari’s Nitro, Microsoft Edge’s Chakra, and Mozilla’s TraceMonkey.
 

 

Discussing Google’s V8 Engine    

 

The most popular of our time is chrome’s V8 engine. In order to obtain speed, it compiles the javascript code at runtime and translates it into machine code instead of using a pure interpreter. At its core, it implements a JIT( Just in time) compiler which compiles the code at runtime. 

Wait what??? How can an engine compile the code at runtime? 

 

To understand what happens underneath the hood, we need to understand two main components of V8:

 

  1. Full Code Gen: A fast compiler that generates unoptimized code as quickly as possible. It is ideal for code that only executes once, or a few times at most.

  2. Crankshaft: A slow compiler that generates optimized code for the hot areas with the help of a profiler.


An image is reflecting the complete structure of JS Engine.

JS Engine


JavaScript is first parsed and Abstract Syntax Tree(AST) is produced. You can read more about the AST from here. Once AST is produced, scope analysis is performed which essentially tells the engine whether each symbol (variable, functions, etc.) refers to a local variable, context variable (closures), or global property. Using scope information, AST is then compiled to native code by our Full CodeGen compiler. 

 

Note: This is one of the core differences between V8 and other JIT engines like SpiderMonkey, Rhino, etc. Other JIT engines use an interpreter instead of a compiler in the fast unoptimized execution and produce Bytecode rather than the Native Code. This is notably missing from the V8 engine. It doesn’t produce any intermediate code.

 

Meanwhile, when the translation of code into native is taking place, a profiler is constantly keeping an eye on the code to figure out hot areas in the code. Hot areas are sections of code that are executed repeatedly.

Following image illustrates the basic idea of the execution:


Mirroring the basic execution inside JS Engine.

Inside JS Engine


V8 performs behavior analysis whenever a function is being called. For every function call, the profiler updates the corresponding context before the next call for ‘Is function hot?’ is made. 

 

Once the profiler identifies the code as hot, code execution takes the path of optimization, where it compiles, optimizes, cache the code, and updates corresponding code with crankshaft compiled optimized version.

 

We will learn more about how JS engines perform optimizations and how you take care of small stuff in your code to help the JS engine in optimization when we’ll go through the concept of Hidden classes and Inline Caching.

 

P. S: If you find any errors or you might add some improvement, please leave a comment, post author is not an expert in V8 internals.

Latest Comments

  • sasvba336

    Aug 08, 2021

    Nice Blog, Such a informative information in this blog and I also read your blog. <a href="https://sasvba.com/blogs/java-android-training-delhi/">Java Android online Training delhi</a> | <a href="https://sasvba.com/java-android-training-in-delhi/">Java Training in delhi</a

  • penatagonspace.07

    May 12, 2022

    Nice article, anyone looking for full stack developer course, there is a No1 training institute in Bangalore. for more details:https://pentagonspace.in/python-full-stack

  • Osman Ibr

    Mar 25, 2023

    DO YOU NEED A FINANCIAL HELP? ARE YOU IN ANY FINANCIAL CRISIS OR DO YOU NEED FUNDS TO START UP YOUR OWN BUSINESS? DO YOU NEED FUNDS TO SETTLE YOUR DEBT OR PAY OFF YOUR BILLS OR START A GOOD BUSINESS? DO YOU HAVE A LOW CREDIT SCORE AND YOU ARE FINDING IT HARD TO OBTAIN CAPITAL SERVICES FROM LOCAL BANKS AND OTHER FINANCIAL INSTITUTES? HERE IS YOUR CHANCE TO OBTAIN FINANCIAL SERVICES FROM OUR COMPANY. WE OFFER THE FOLLOWING FINANCE TO INDIVIDUALS- *COMMERCIAL FINANCE *PERSONAL FINANCE *BUSINESS FINANCE *CONSTRUCTION FINANCE *BUSINESS FINANCE AND MANY MORE: FOR MORE DETAILS.CONTACT ME VIA. Contact Our Customer Care: EMAIL: :bullsindiaww@gmail.com Our services... Guaranteed 100%

  • Osman Ibr

    Mar 25, 2023

    Financing / Credit / Loan We offer financial loans and investment loans for all individuals who have special business needs. For more information contact us at via email: bullsindiaww@gmail.com From 5000 € to 200.000 € From 200.000 € to 50.000.000 € Submit your inquiry Thank you

  • umeshchandradhasmana01

    May 31, 2023

    Hi Dear The JavaScript engine consists of several key components. Firstly, the parser reads and interprets the JavaScript code, converting it into an Abstract Syntax Tree (AST). The AST is then optimized by the optimizer, and the resulting optimized code is executed by the interpreter or the Just-In-Time (JIT) compiler. The engine also includes a memory heap for storing objects and variables, as well as a call stack for managing function calls and executing code in a sequential manner. Best regards, Mobiloitte

  • bullsindiaww7a90e0e81a594e0c

    Jul 01, 2023

    DO YOU NEED A FINANCIAL HELP? ARE YOU IN ANY FINANCIAL CRISIS OR DO YOU NEED FUNDS TO START UP YOUR OWN BUSINESS? DO YOU NEED FUNDS TO SETTLE YOUR DEBT OR PAY OFF YOUR BILLS OR START A GOOD BUSINESS? DO YOU HAVE A LOW CREDIT SCORE AND YOU ARE FINDING IT HARD TO OBTAIN CAPITAL SERVICES FROM LOCAL BANKS AND OTHER FINANCIAL INSTITUTES? HERE IS YOUR CHANCE TO OBTAIN FINANCIAL SERVICES FROM OUR COMPANY. WE OFFER THE FOLLOWING FINANCE TO INDIVIDUALS- *COMMERCIAL FINANCE *PERSONAL FINANCE *BUSINESS FINANCE *CONSTRUCTION FINANCE *BUSINESS FINANCE AND MANY MORE: FOR MORE DETAILS.CONTACT ME VIA. Contact Our Customer Care: EMAIL: :bullsindia187@gmail.com (CALL/WHATS APP) :+918130061433 Our services... Guaranteed 100%