Inside Chrome’s V8 Engine: How It Powers JavaScript Execution

Introduction

Google Chrome is one of the most popular browsers today, known for its speed and efficiency. But how does it work behind the scenes? In this blog, we'll explore how Chrome's JavaScript engine, V8, processes and executes JavaScript, and how the browser loads and renders HTML and CSS to create a webpage.
Understanding these processes can help developers optimize web applications and address performance issues.

I've been excited to write this blog for a while because I'm fascinated by how browsers work in detail. I'm thrilled to finally share these insights with you! 🚀

The Heart of Chrome 🏎️

What is V8?

When I first heard the term "V8," I thought it referred to the powerful engines in muscle cars. Little did I know, V8 is actually the name of Chrome’s JavaScript engine.
Like a car's V8 engine, Chrome's V8 is built for speed and can run JavaScript incredibly fast. What about performance?
The speed of JavaScript execution depends on how well the V8 optimizes and compiles the code, just like a V8 car’s speed relies on the engine. V8 converts JavaScript into machine code using Just-In-Time (JIT) compilation and powerful optimization algorithms, giving it an edge in execution speed.

How V8 Works?

Before we dive into how V8 works, let's quickly review some basic web concepts. Each time we visit a webpage, the browser requests resources like HTML, CSS, and JavaScript from the web server. These resources are then parsed, processed, and rendered to create the webpage we see. The browser's task is to load these resources efficiently and execute the necessary code.

With that in mind, let's focus on the part of the process that handles the execution of JavaScript: the V8 engine. V8 is a key component that powers Chrome and other Chromium-based browsers. It compiles and executes JavaScript code, enabling dynamic and interactive websites.

Whoever built this engine clearly had a love for cars — after all, they named it V8! First, it fires up with the Ignition interpreter, quickly getting things running. Then, as performance ramps up, it boosts with the Turbofan compiler, ensuring your code accelerates like a finely-tuned sports car!

Here are more details, where we’ll dive into the process step by step.

Parsing: When Chrome encounters JavaScript code, V8 first parses it. This means it reads the source code and turns it into an Abstract Syntax Tree (AST). The AST is a hierarchical structure that represents the syntax of the JavaScript code. This step helps the engine understand the code's structure before executing it.
Interpreter (Ignition): After parsing, V8 uses the Ignition interpreter to turn the JavaScript code into bytecode. Ignition is a simple and fast interpreter that lets V8 start running code right away even before the more complex optimizations happen. Think of it as the spark plug that gets the engine going—quick and efficient, but it's just the start of a much more powerful process!
Compilation (Turbofan): After the code is interpreted by Ignition, V8 sends the bytecode to the Turbofan compiler. Turbofan is V8's optimizing compiler, which takes the bytecode from Ignition and compiles it into highly optimized machine code. Turbofan uses runtime profiling information to apply optimizations such as inlining functions, optimizing loops, and removing unnecessary calculations. We will explore this in more detail later.
Execution: Once Turbofan compiles the bytecode into machine code, the CPU executes it directly. This makes it much faster than engines that interpret JavaScript line-by-line. This execution step ensures that V8 provides high performance, even for complex JavaScript tasks.
Just-In-Time (JIT) Compilation: V8's Just-In-Time compilation means the code is compiled while it runs, not before. This allows V8 to optimize based on how the code is executed, boosting performance as it runs and adapting to real-world scenarios.

For those curious about the details, we'll explore JIT compilation further, including optimization and de-optimization techniques, in another blog post. Stay tuned! ⚡️
Garbage Collection: V8 manages memory using garbage collection, which frees up memory by removing unused variables and objects. V8 uses Orinoco, its generational garbage collector, which targets newly created objects (young generation) and occasionally cleans up long-lived objects (old generation). This approach ensures efficient memory use and helps prevent memory leaks, keeping Chrome running smoothly.

V8's Performance Boosters: A Deep Dive into Optimization

We've talked about how V8 runs JavaScript, but there's more to know about optimization. V8 uses powerful techniques to make JavaScript run faster and more efficiently. Let me explain them in simple terms:

Hidden Classes (How it Works Under the Hood:):

When V8 creates an object, it doesn't just store its properties randomly in memory. Instead, V8 assigns a Hidden Class to the object, organizing the properties in a specific way.
Every object with the same shape (the same properties in the same order) shares the same Hidden Class. This allows V8 to look up object properties based on the class instead of checking the entire object structure.
Example: Imagine we create multiple objects like {name: "John", age: 30} and {name: "Jane", age: 25}. These two objects will have the same Hidden Class because their shapes are identical, allowing V8 to access the properties (name and age) much faster.

Inline Caches (How it Works Under the Hood):

What is a Lookup?: Whenever a function is called or a property is accessed, V8 needs to find where that function or property is stored in memory. For example, in a method call like obj.method(), V8 has to locate the method property in the object obj.
The first time V8 performs a lookup, it searches the memory for the property or function, which takes some time. However, the Inline Cache remembers where this method or property was found, so the next time V8 encounters the same lookup, it can skip the search and go straight to the cached location.
Inline Caching for Functions: For function calls, V8 caches the location of the function the first time it's called. When the function is called again with the same parameters or object, V8 uses the cache to quickly execute it without repeating the lookup process.
How it Speeds Things Up: This caching prevents unnecessary work. For example, if a method is called multiple times in a loop, V8 only needs to find the method once. After that, the Inline Cache ensures each subsequent call is much faster.
Cache Invalidation: When the shape of an object changes, such as when a new property is added or an existing one is removed, V8 clears the cached lookup to ensure it uses the updated structure of the object during future property access.

Conclusion

In this blog, we explored how Chrome’s V8 engine processes JavaScript, turning it into machine language quickly. V8 ensures fast execution by parsing code into an Abstract Syntax Tree, interpreting it with Ignition, and optimizing it with the Turbofan compiler. Techniques like Just-In-Time compilation, garbage collection, Hidden Classes, and Inline Caches boost performance.

Understanding these helps developers write efficient JavaScript and optimize web apps for speed. V8 enhances code execution speed, ensuring smooth operation as websites become more dynamic.

In the next blog, we'll delve deeper into V8's optimization strategies, including Just-In-Time compilation specifics and more performance tips. Stay tuned! 🚀