Revisiting the Basics: What’s Inside JavaScript Engine?

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?

2. Does JavaScript Engine compile or Interpret the code?

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

---

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:

---

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.