This post is catered to the inside of the JS engine. We will seek answers to the following questions:
What are the components of the JS engine?
How knowing about working itself can help us write optimized code?
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
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:
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.
Crankshaft: A slow compiler that generates optimized code for the hot areas with the help of a profiler.
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.