How JavaScript Engine Works?

To understand the JavaScript engines you have to understand what goes into it when we compile and execute our code. Once you completely read the article, you’ll be able to write an excellent piece of code. The article is about JavaScript engines, which will help you to understand the performance of JavaScript engines and its most valuable features.

What Are JavaScript Engines?

JavaScript engines are a program that helps in converting your code of JavaScript into a lower level code or machine code. ECMAScript Standards is being followed by the JavaScript engines. The job of these standards is to give a definition, how JavaScript engines should work. It also tells what all features it should have.

If we talk generally, high-level languages such as JavaScript, C, FORTRAN have been abstracted from machine language. In comparison to C or C++, JavaScript is abstracted much farther from the machine level. C and C++ are much closer to hardware among other reasons that make it much faster. 

Compilation and Interpretation

Compilation and interpretation are few approaches that are used generally for the implementation of the code by programming languages.

A compiler can be defined as a program that helps in transforming a code. This transformation is done for the code that has been written in any programming language (source language) into another programming language that was targeted by you. They perform this task by translating the source code from a much high-level programming language to a low-level programming language i.e. machine language.

An interpreter analyses your source code line by line and instruction by instruction and then performs the execution of the corresponding machine code on the targeted machine directly without any involvement of a third party.

Although compilation and interpretation are the two principles with the help of which the implementation of the programming languages is done, they are also related to each other in some cases. This relation comes out as most of the systems that use interpretation do perform some works of translation. The translation work is done by compilers also.

If we talk about the category of JavaScript then it belongs to the interpreted category, even after it has been compiled technically. Today’s modern compilers of JavaScript performs the Just-In-Time (JIT) compilation that occurs at the time of running.

JavaScript engines are made connected to browsers and web servers, e.g. Node JS, so that you should have permission for run-time compilation and execution of JavaScript code.

The Anatomy of JavaScript Engines

ECMA Script specifies the procedure in which JavaScript should be implemented by the browser so that in every single browser this program runs the same. It does not specify how the JavaScript should be running inside these browsers. It depends on the browser of the vendor to decide this. Each browser gives you a JavaScript engine that will run the JavaScript code.

Spider Monkey JavaScript engines are being used by the Netscape browser. This engine was defined as a rudimentary interpreter with zero optimizations. If you run your JavaScript code on this engine it will run and work but will require more time.

How Does it Work?

The work of the JavaScript engine was taking JavaScript source code. Then perform the compilation to binary instructions (machine code) that are easily understandable by CPU.

A JavaScript engine which is limited consists of a baseline compiler whose work is to do the compilation of the code in the form of intermediate representation (IR), in other words, it is called byte code and then gives the byte code to the interpreter.

Further, the interpreter takes this byte code, and then make the conversion into machine code. This machine code will further run this code on the hardware of the machine.

"It is very similar to the working of Java but the generation of byte code is done by the programmer and byte code has been shared universally not the source code."

The job of a baseline compiler is to perform the compilation of the code as fast as possible. It also generates a less-optimized byte code. As in the interpreter, it doesn’t have an optimized byte code for working with, then the speed of the application will be very slow. On the other hand, the time of the application will be very less.

Spider Monkey JavaScript has been embedded in a piece of machinery that is complicated. This is done to increase the efficiency of highly optimized machine code. It is currently being used in the Mozilla Firefox browser.

If we have a choice to make a highly dynamic and interactive web application, then the developers experience issues in executing JavaScript. This was the problem that was faced by Google’s Chrome browser when they were displaying Google maps on the web platform. To increase the performance of JavaScript they came with a better solution, which we will discuss later in this article.

If the system in JavaScript is lacking then the JavaScript engine will be producing very less machine code. So, based on the values already mentioned, a JavaScript engine can make an intuition about the data types of the variables and perform the generation of much better code.

JavaScript engine can also perform the gathering of profiling data of the execution of the code. It also analyzes the code that is running very slow. This code is commonly known as “Hot” code as it gets burned in the CPU. We have the option to further optimize and replace the machine code that is already optimized.

Thinking about these things and other problems as well that were caused by full-codegen and crankshaft, the team of V8 performs the creation of a new version of the V8 engine from the ground up. The new version that was created was launched in 2017.

What About Other JavaScript Engines?

We have looked upon the working of V8, we will discuss in detail also later in this article. Very similar to this one, another model is being followed by a few of the other browsers vendors such as Spider Monkey engine which is used in Firefox, and Chakra engine which is used in internet explorers.

At the time of looking at some of the JavaScript engines, it might look complicated to you because of their multiple baseline and optimization of compilers but when it is in a nutshell, they do follow the same structure of the optimization phenomenon.

Few Well-known JavaScript Engines

Google’s V8:

It is an open-source Javascript engine that was developed by The Chromium Project. It was developed for Google Chrome and Chromium web browsers. This project was introduced and created by Lark Bak. When the first version of chrome was released i.e. on September 2, 2008. At the same time, the first version on Chrome's V8 engine came into existence. This version is also compatible while using Server-side technologies like Node.js and MongoDB.

Interpretation and execution are done in low -level bytecodes because it has an Ignition Interpreter. Despite being the slower and smaller size of these low-level bytecodes than the machine codes, they require lesser compilation time. To produce an un-optimized code Full-Codegen compiler can be used, which runs faster as compared to others. Turbofan, the JIT compiler will compile the code and it also keeps an eye on code that if it is used multiple times throughout the whole JavaScript execution.

The objects in it are observed by garbage collectors including data that is no longer referenced. The collection of this kind of data is done by this collector. While performing a garbage collection cycle, the V8 engine automatically stops the execution of the program. 

CHAKRA:

Chakra JavaScript engine was developed by Microsoft for use in its Microsoft Edge web browser. It can be said as a fork of the Jscript engine that is being used in Internet explorer. If we talk in simple words chakra changes the qualities of execution of JavaScript inside internet Explorer. Chakra is consisting of a new compiler of JavaScript that helps you in compiling your JavaScript code into high-level machine code. It provides you a new interpreter for executing the script on traditional web pages and improvements to the JavaScript runtime and libraries.

SPIDER MONKEY:

This name is given as a code name for the JavaScript engine, which was written by the Brendan Eich at Netscape Communications. Then it was later released as defining it as open-source. This is currently under the maintenance of the Mozilla Foundation Spider Monkey which is written in C and C++ programming languages. It is being used in so many Mozilla products, that include Firefox, and this is available under the Mozilla public license version 2.0. It connects the type inference with Jaegermonkey, JITcompiler for the generation of the efficient code.

Spider Monkey consists of an interpreter, few JIT compilers, a de-compiler, and a garbage collector.

RHINO:

Rhino JavaScript engine has been written completely in Java and it is also being managed by the Mozilla Foundation. This is managed as open-source software. If we compare it with the SpiderMonkey JavaScript engine that was also developed by Mozilla but that was written in C++ and it is being used in Mozilla Firefox.

JavaScript Runtime

So many developers are passionate about their work. They have completely devoted their lives to working on front-end or back-end applications to protect the real meaning of JavaScript. 

If we compare JavaScript with other programming languages it is not similar to them. It is a single-threaded language at runtime. This means that the execution of the code is done but only one piece at a time. As the code is being executed sequentially, so any code that is taking a longer time, as usual, will block the path of other code that is required to be executed after that. So sometime you will be observing the below screen while using Google Chrome.

When you open any website on your browser, it makes the use of JavaScript, a single thread of execution. That single thread is having the responsibility of handling everything like scrolling of the web pages, printing something on the webpage, listen to DOM events, and doing other things.

Once the execution of the JavaScript is stopped, the browser will automatically stop doing those things. This means it will simply stop at one point, in other words, freeze at one point and will not be responding to anything until that task is completed.

JavaScript runtime refers to the condition or environment where your JavaScript code is. With that said, JavaScript can be executed on Google chrome, in which case your JavaScript runtime is v8, if on Mozilla — it is Spider Monkey, if IE — then its chakra, and if on the node, again its v8.

The JavaScript Runtime APIs provide a way for desktop and server-side applications to be executed. This is running on the Windows operating system which adds scripting capabilities to an app by using the standards of Chakra. These APIs are available on Windows 10 and any version of the Windows operating system. This is having Internet Explorer version 11.0 installed on the machine.

Inline Caching

The concept of inline caching is based on empirical observation. It means that the objects that occur at a particular call site are often of the same type. In those cases, performance can be increased greatly by storing the result of a method lookup "inline", i.e. directly at the call site. To facilitate this process, call sites are assigned different states. Initially, a call site is considered to be "uninitialized".

Once the language runtime reaches a particular uninitialized call site, it performs the dynamic lookup, stores the result at the call site, and changes its state to "monomorphic". If the language runtime reaches the same call site again. It retrieves the call from it and invokes it directly without performing any more lookups. To account for the possibility that objects of different types may occur at the same call site, the language runtime also has to insert guard conditions into the code.

So here is the end of an interesting topic. I hope it was clear to you how the JavaScript engine works. Thank you for reading this article.

Stay tuned.