{{announcement.body}}
{{announcement.title}}

V8 JavaScript Engine: The Non-Stop Improvement

DZone 's Guide to

V8 JavaScript Engine: The Non-Stop Improvement

In this artilce, we break down the history of Chrome's V8 engine and the massive impact its had on JavaScript programming.

· Web Dev Zone ·
Free Resource

V8 is not only a famous eight-cylinder engine you can find in Dodge Charger, Bentley Continental GT, or Boss Hoss motorcycles. In 2008 The Chromium Project developers released a new JavaScript and WebAssembly engine with the same name – V8, such a groovy reference to the engineering marvel. So one more Vee-eight engine was born. 

One of the interesting properties of JavaScript and the reason why V8 being used for today is that it's platform-independent. 

Lars Bak, danish programmer, the tech lead of V8 project

What Is a JavaScript Engine

In short, JS engines are programs converting JavaScript code into low-level or machine code. They follow the ECMAScript Standards that define features and execution process.

The same as V8 was a remarkable piece of machinery, V8 JS engine found a niche for itself. Most likely you have already "met" Vee-eight face-to-face. As a part of Chrome, this engine runs the JavaScript when you visit a web page. In other words, V8 provides the runtime environment for JS. And the web-platform APIs (Application Programming Interfaces) are already provided by the browser. Except for browsers V8 is embedded in such server-side technologies, as Node.js, MongoDB, and Couchbase.

V8 is written in C++, and can run standalone or be embedded into the C++ app.

It is portable and runs on:

  • Windows 7 or later
  • macOS 10.12+
  • Linux systems using x64, IA-32, MIPS and ARM processor

Among the famous JavaScript engines except V8 are:

  • SpiderMonkey - Firefox
  • JavaScriptCore (Nitro) - Safari
  • Chakra JS - Microsoft Edge

It doesn't matter if you run it in the browser or Node.js or an IoT device: to go from something that you write to executing that - that's what the engines are doing. JS engines are the heart of everything that we do.

Franziska Hinkelmann, Senior Engineer at Google


Prehistory: Let's Start the Engine

JavaScript is the most popular scripting language for the web today, JS modules are supported in all major browsers. And it's a great achievement that V8 is independent of the browser in which it's hosted. How did this happen?

This open-source JS engine came into being with the Chromium Project for Google Chrome and more Chromium browsers. Lars Bak, a danish programmer, was a project's creator and he's the one who led the V8  engine room  team. This man is a true virtual machine expert and guru of object-oriented design. By the way, Lars Bak spent 30 years developing programming languages. Once upon a time, he implemented a runtime system for BETA. Since then, Mr. Bak has left marks on a dramatic list of different software systems and finally get to the V8. How it was?

Autumn, 2006. Google hired Lars Bak for building a new JavaScript engine aimed at the Chrome browser. The team focused on building the fastest JS runtime worldwide. For such a dynamic, loosely typed language it was a real feat. The new JS runtime was named "V8" – such allusion to the famous powerful muscle car engine.

V8 engine graphic

Supported and financed by Google, V8 engine powers today a huge amount of server-side JS code.

P.S.: After V8 Lars Bak has already realized Dart and Toit and received the Dahl-Nygaard prize in 2018. Well, that track record sounds impressive!


What Goes on Under the Hood

 It is іnteresting that V8's subprocesses are named in accordance with automotive details. That is not only a stylish brand idea. It's also a good way for users to gain insight into JS engine behavior.

I like how they changed the names of the processing of the V8 engine to stuff like "ignition" and "turbofan". It's easier to remember because it's like a car engine now.

Ksee, YouTube user

And what is exactly happens with JavaScript parsed by the V8?

In the basic terms, JS engine:

1. Taking your  fuel  source code
2. The parser is generating an abstract syntax tree from the source
3. V8's interpreter is generating a bytecode from the syntax tree that a compiler can understand
4. V8's compiler is generating a graph from bytecode (replacing bytecode sections with optimized machine code)
5. And, ta-dah – executing!


How V8 works graphic

And what is making code runs so fast? Let's consider some interesting V8's characteristics. 

  • Interpreted or compiled?

JS is usually perceived as an interpreted language, but its modern engines are much more than just interpreters in order to get a more performant execution. The basis of the V8 that allows a high-speed JS executing is the JIT (Just-In-Time) compiler optimizing code during runtime (not Ahead-Of-Time). It combines the best features of interpreters and compilers, mixing these steps and making translation and execution faster.

The first optimizing compiler of V8 was "FullCodegen". The newest and more advanced is "Turbofan". Its backend is used by the V8's low-level register-based interpreter called 'Ignition'. This combined Ignition+TurboFan pipeline was launched in 2017.

In 2018 was released Liftoff, WebAssembly's (Wasm) first-tier compiler in V8 for a fast startup of complex websites with big Wasm modules, for example, Google Earth.

  • Keep calm and maintain cleanliness

Over the past years, V8's developers worked on the garbage collection process improvement a lot. Finally, they implemented a 2 generation-based garbage collector (also known as a full GC) called "Orinoco". It applies the latest effective techniques to free the thread. Collector finds objects and data that are no longer referenced and collects them. This contributes to well-improved latency and page load, smoother animation, scrolling, and user interaction.

  • Latency-off

Also, there is an efficient memory management system at V8's disposal. It allows fast allocation and minimal process while running JavaScript what means a lack of latency and hiccups using JS inside the browser.

In 2018, the Chromium team started a project called V8 Lite. The main aim was a forcefully reducing memory usage. 

Originally, it was intended as a Lite mode for low-memory devices or embedded use-cases. But soon developers decided to fully implement that optimization bonuses in the regular V8, advancing all vee-eight usage areas. You can consult technical details of memory savings and improved execution speed without wizardry in V8's official blog.

The main goal of engine development is to make JavaScript run as fast as possible. Developers emphasize that one of the crucial tasks is improving a distributed system where it is possible to shut down the individual unit and the rest of the units take over the functionality. That makes the systems more robust. It can be compared to cloud systems architecture, where one can tolerate a single device crashing, while the overall system runs smoothly.

Our philosophy is that if you make a quick feedback loop, from programming to receiving feedback from the running system, in under a second, it inspires the programmer to experiment and invent new things.

Lars Bak, danish programmer, the tech lead of V8 project

Vroom Vroom: Drive on!

The famous Peter Drucker's quote "The overwhelming majority of successful innovations exploit change" is especially relevant in the world of JavaScript. Every 6 weeks Chromium's team creates a new branch of V8 engine as part of their release process. Here you can check the news. The newest V8's v. 8.1  was released on February 25th, 2020.

All Roads Lead to Chrome

All v.8.1 highlights are especially enjoyable in anticipation of the new Chrome release. Chrome 80 Stable was released on February 4th, 2020, as reported by Chromium. So let's check bug fixes and performance improvements and drive on with V8 JS in 2020!
Topics:
chrome ,chromium ,javascript ,v8 ,web dev

Published at DZone with permission of Alexandra Lozovyuk . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}