Inline caching is a very less discussed topic in the field of JavaScript, yet it’s very important to write optimized code.

Before we start what is inline caching, we need to know why do we need inline caching. Yeah we need caching to speed up the things, we all know that. Okay, so next part is how inline caching came into play? Inline caching history dates as long back as Google V8 engine.

The first JavaScript engine, code named SpiderMonkey, was built for Netscape Navigator and was simply an interpreter that read and executed source code. In 2004, when Google introduced a new application; Google Maps. For JavaScript and developers everywhere it was a game changer. A very, very slow game changer. Browsers bogged down as the JavaScript engine simply plowed away at all that code.

Photo by Junior Teixeira from Pexels
To overcome this sluggishness, Google built it’s own engine — V8 which now powers Chrome and Node.js. Before V8, JavaScript was more of a interpreted language but Google changed the language from interpreted to JIT compiled language. V8 has 2 compilers, Full-Codegen and Crankshaft. Full-Codegen parses JavaScript directly to machine code, without an intermediary language, allowing it to begin execution sooner. A JIT compiler called Crankshaft produces optimized code for hot methods. This means that in the same V8 program, different levels of optimized code coexist at the same time.
Crankshaft is where the speed really comes from.

Now we move on to our main topic i.e Inline Caching. For Inline Caching let’s take a look at a code snippet.

Inline Caching

Let’s analyze what the above code does. We create a function that takes an argument and return template string. Next, we create a userName object with keys — firstName and lastName. Now, we call function printUserName with argument of userName object several times.

So, what V8 engine or many other JavaScript engine does is that first they run the function normally as you would expect. But, after some time when the function is called repeatedly, they assume or they act smart and just equals the repeated function calls to what the function returns to save time and improve the efficiency or speed. In this case, they equals

printUserName(userName) = “Hello John Doe”

This is called or better known as Inline Caching. So, the gist of this whole inline caching is to write better and efficient codes knowing how the code will be processed by the engine or compiler. We should write codes that provides the intention to the machines on what we wish to do.