ufocoder · October 13, 2020 13:27 · Mar 12, 2014 · Mar 12, 2014 · Mar 12, 2014 · Mar 12, 2014
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -55,4 +55,12 @@ mov eax,[ebp+0xc]
 mov edx, eax
 mov ecx, 0x60b55dd1
 call 0x311286e0  ;; this.puppies
-```
+```
+
+It results in a huge (~20x) speed improvement.
+
+### Deoptimizations and Bailouts
+
+V8 is generally pretty optimistic about your code and tries to speed it up as much as it can. But sometimes the assumptions that it makes are not valid (a hidden class wasn't the one expected). In this case, V8 will replace Inline Cache fast path code with full non-optimized code.
+
+Bailouts happen when V8 can't optimize some parts of your code because it doesn't support some language features. V8 won't optimize functions with `try {} catch()` or with `with {}` statements in them.
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -45,4 +45,14 @@ mov eax,[ebp+0xc]
 mov edx, eax
 mov ecx, 0x60b55dd1
 call LoadIC_Initialize  ;; this.puppies
+```
+
+When you try to access `this.puppies`, V8 is going do a call out to Inline Cache. And as your code keeps running and/or getting "hotter", V8 will make an optimistic but usually valid assumption that the value is going to stay the same. Therefore, the call out to Inline Cache can be replaced with just an address in the memory, like so:
+
+```nasm
+push [ebp+0x8]
+mov eax,[ebp+0xc]
+mov edx, eax
+mov ecx, 0x60b55dd1
+call 0x311286e0  ;; this.puppies
 ```
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -39,7 +39,7 @@ Consider the example:
 this.puppies[0]
 ```
 
-```llvm
+```nasm
 push [ebp+0x8]
 mov eax,[ebp+0xc]
 mov edx, eax

diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -39,7 +39,7 @@ Consider the example:
 this.puppies[0]
 ```
 
-```avrasm
+```llvm
 push [ebp+0x8]
 mov eax,[ebp+0xc]
 mov edx, eax

diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -39,7 +39,7 @@ Consider the example:
 this.puppies[0]
 ```
 
-```assembler
+```avrasm
 push [ebp+0x8]
 mov eax,[ebp+0xc]
 mov edx, eax

diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -29,3 +29,20 @@ When `Person` function gets invoked to initialize `ironMan` object, a hidden cla
 
 When `Person` gets invoked to initialize `captainAmerica`, the hidden class chain (`C0` -> `C1` -> `C2`) is going to reused and `captainAmerica` and `ironMan` are going to have the same hidden class. But as soon as the shape(layout) of the object changes, it gets a new hidden class. By assigning `87` to the `age` property, we created a new hidden class `C2` that is going to be based on `C2` with `age` property on it. It's very important to maintain the shape of your objects so V8 can optimize the code more efficiently.
 
+### Inline Cache
+
+In order to optimize property access, V8 uses an old technique called Inline Caching. You can think of Inline Cache as a fast path (shortcut) to the value/property.
+
+Consider the example:
+
+```javascript
+this.puppies[0]
+```
+
+```assembler
+push [ebp+0x8]
+mov eax,[ebp+0xc]
+mov edx, eax
+mov ecx, 0x60b55dd1
+call LoadIC_Initialize  ;; this.puppies
+```
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -4,8 +4,12 @@ Knowing how internals work is always a good. Pretty much for everything. Cars, t
 
 As you might have guessed, it’s also true for web development. Knowledge of CSS transitions allows you to achieve better performance and not to use JavaScript in most cases. Knowledge of V8 internals allows you to write more performant JavaScript code. So let’s talk about V8 a little.
 
+### A little about V8
+
 V8 is a JavaScript engine built by Google. Firefox built [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), Opera built [Carakan](http://my.opera.com/ODIN/blog/carakan-faq) and Microsoft built [Chakra](http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29). One very important difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScript to machine code at execution.
 
+### Hidden Classes
+
 It’s rather hard to optimize a dynamically typed, prototype-based language, such as JavaScript. Objects can change their type during runtime and it happens implicitly. To track types of JavaScript object and variables, V8 introduced the concept of [hidden classes](https://developers.google.com/v8/design). During runtime V8 creates hidden classes that get attached to each and every object to track its shape/layout. That allows to optimize the property access time.
 
 Consider the example:

diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -21,4 +21,7 @@ var captainAmerica = new Person('Steve', 'Rogers');
 captainAmerica.age = 87;
 ```
 
-When `Person` function gets invoked to initialize `ironMan` object, a hidden class (let's call it `C0`) gets created along with invocation. `C0` is an empty class because `Person` doesn't have any properties yet. Next, `this.firstName` gets assigned and hidden class `C1` gets created. `C1` is based on `C0` with `firstName` property. Next, `this.lastName` gets assigned and guess what? Hidden class `C2` gets created. `C2` based on `C1` with `lastName` property.
+When `Person` function gets invoked to initialize `ironMan` object, a hidden class (let's call it `C0`) gets created along with invocation. `C0` is an empty class because `Person` doesn't have any properties yet. Next, `this.firstName` gets assigned and hidden class `C1` gets created. `C1` is based on `C0` with `firstName` property. Next, `this.lastName` gets assigned and guess what? Hidden class `C2` gets created. `C2` based on `C1` with `lastName` property.
+
+When `Person` gets invoked to initialize `captainAmerica`, the hidden class chain (`C0` -> `C1` -> `C2`) is going to reused and `captainAmerica` and `ironMan` are going to have the same hidden class. But as soon as the shape(layout) of the object changes, it gets a new hidden class. By assigning `87` to the `age` property, we created a new hidden class `C2` that is going to be based on `C2` with `age` property on it. It's very important to maintain the shape of your objects so V8 can optimize the code more efficiently.
+
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -19,4 +19,6 @@ function Person(firstName, lastName) {
 var ironMan        = new Person('Tony',  'Stark');
 var captainAmerica = new Person('Steve', 'Rogers');
 captainAmerica.age = 87;
-```
+```
+
+When `Person` function gets invoked to initialize `ironMan` object, a hidden class (let's call it `C0`) gets created along with invocation. `C0` is an empty class because `Person` doesn't have any properties yet. Next, `this.firstName` gets assigned and hidden class `C1` gets created. `C1` is based on `C0` with `firstName` property. Next, `this.lastName` gets assigned and guess what? Hidden class `C2` gets created. `C2` based on `C1` with `lastName` property.
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -16,7 +16,7 @@ function Person(firstName, lastName) {
   this.lastName  = lastName;
 }
 
-var ironMan        = new Person(“Tony”,  “Stark”);
-var captainAmerica = new Person(“Steve”, “Rogers”);
+var ironMan        = new Person('Tony',  'Stark');
+var captainAmerica = new Person('Steve', 'Rogers');
 captainAmerica.age = 87;
 ```
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -8,4 +8,15 @@ V8 is a JavaScript engine built by Google. Firefox built [SpiderMonkey](https://
 
 It’s rather hard to optimize a dynamically typed, prototype-based language, such as JavaScript. Objects can change their type during runtime and it happens implicitly. To track types of JavaScript object and variables, V8 introduced the concept of [hidden classes](https://developers.google.com/v8/design). During runtime V8 creates hidden classes that get attached to each and every object to track its shape/layout. That allows to optimize the property access time.
 
-It's really 
+Consider the example:
+
+```javascript
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName  = lastName;
+}
+
+var ironMan        = new Person(“Tony”,  “Stark”);
+var captainAmerica = new Person(“Steve”, “Rogers”);
+captainAmerica.age = 87;
+```
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -6,4 +6,6 @@ As you might have guessed, it’s also true for web development. Knowledge of CS
 
 V8 is a JavaScript engine built by Google. Firefox built [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), Opera built [Carakan](http://my.opera.com/ODIN/blog/carakan-faq) and Microsoft built [Chakra](http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29). One very important difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScript to machine code at execution.
 
-It’s rather hard to optimize a dynamic language, such as JavaScript. Objects can change their type during runtime. To track types of JavaScript object and variables, V8 introduced the concept of [hidden classes](https://developers.google.com/v8/design).
+It’s rather hard to optimize a dynamically typed, prototype-based language, such as JavaScript. Objects can change their type during runtime and it happens implicitly. To track types of JavaScript object and variables, V8 introduced the concept of [hidden classes](https://developers.google.com/v8/design). During runtime V8 creates hidden classes that get attached to each and every object to track its shape/layout. That allows to optimize the property access time.
+
+It's really 
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -6,4 +6,4 @@ As you might have guessed, it’s also true for web development. Knowledge of CS
 
 V8 is a JavaScript engine built by Google. Firefox built [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), Opera built [Carakan](http://my.opera.com/ODIN/blog/carakan-faq) and Microsoft built [Chakra](http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29). One very important difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScript to machine code at execution.
 
-It’s rather hard to optimize a dynamic language, such as JavaScript. Objects can change their type during runtime. To track types of JavaScript object and variables, V8 introduced the concept of hidden classes.
+It’s rather hard to optimize a dynamic language, such as JavaScript. Objects can change their type during runtime. To track types of JavaScript object and variables, V8 introduced the concept of [hidden classes](https://developers.google.com/v8/design).
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -1,3 +1,5 @@
+## Hidden classes in JavaScript and Inline Caching
+
 Knowing how internals work is always a good. Pretty much for everything. Cars, trains, computers, you name it. It gives you an insight on what happens under the hood. You also act/react differently based on this knowledge.
 
 As you might have guessed, it’s also true for web development. Knowledge of CSS transitions allows you to achieve better performance and not to use JavaScript in most cases. Knowledge of V8 internals allows you to write more performant JavaScript code. So let’s talk about V8 a little.

diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -2,6 +2,6 @@ Knowing how internals work is always a good. Pretty much for everything. Cars, t
 
 As you might have guessed, it’s also true for web development. Knowledge of CSS transitions allows you to achieve better performance and not to use JavaScript in most cases. Knowledge of V8 internals allows you to write more performant JavaScript code. So let’s talk about V8 a little.
 
-V8 is a JavaScript engine built by Google. Firefox built [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), Opera built Carakan and Microsoft built Chakra. One very imporant difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScript to machine code at execution.
+V8 is a JavaScript engine built by Google. Firefox built [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), Opera built [Carakan](http://my.opera.com/ODIN/blog/carakan-faq) and Microsoft built [Chakra](http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29). One very important difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScript to machine code at execution.
 
 It’s rather hard to optimize a dynamic language, such as JavaScript. Objects can change their type during runtime. To track types of JavaScript object and variables, V8 introduced the concept of hidden classes.
diff --git a/hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.md
@@ -2,6 +2,6 @@ Knowing how internals work is always a good. Pretty much for everything. Cars, t
 
 As you might have guessed, it’s also true for web development. Knowledge of CSS transitions allows you to achieve better performance and not to use JavaScript in most cases. Knowledge of V8 internals allows you to write more performant JavaScript code. So let’s talk about V8 a little.
 
-V8 is a JavaScript engine built by Google. Firefox built SpiderMonkey, Opera built Carakan and Microsoft built Chakra. One very imporant difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScript to machine code at execution.
+V8 is a JavaScript engine built by Google. Firefox built [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey), Opera built Carakan and Microsoft built Chakra. One very imporant difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScript to machine code at execution.
 
 It’s rather hard to optimize a dynamic language, such as JavaScript. Objects can change their type during runtime. To track types of JavaScript object and variables, V8 introduced the concept of hidden classes.
diff --git a/hidden-classes-in-js-and-inline-caching.js → hidden-classes-in-js-and-inline-caching.md b/hidden-classes-in-js-and-inline-caching.js → hidden-classes-in-js-and-inline-caching.md
diff --git a/hidden-classes-in-js-and-inline-caching.js b/hidden-classes-in-js-and-inline-caching.js
@@ -1,8 +1,7 @@
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName  = lastName;
-}
+Knowing how internals work is always a good. Pretty much for everything. Cars, trains, computers, you name it. It gives you an insight on what happens under the hood. You also act/react differently based on this knowledge.
 
-var ironMan        = new Person('Tony',  'Stark');
-var captainAmerica = new Person('Steve', 'Rogers');
-captainAmerica.age = 87;
+As you might have guessed, it’s also true for web development. Knowledge of CSS transitions allows you to achieve better performance and not to use JavaScript in most cases. Knowledge of V8 internals allows you to write more performant JavaScript code. So let’s talk about V8 a little.
+
+V8 is a JavaScript engine built by Google. Firefox built SpiderMonkey, Opera built Carakan and Microsoft built Chakra. One very imporant difference between V8 and other JavaScript engines is that V8 doesn’t generate any intermediate code. It compiles JavaScript to machine code at execution.
+
+It’s rather hard to optimize a dynamic language, such as JavaScript. Objects can change their type during runtime. To track types of JavaScript object and variables, V8 introduced the concept of hidden classes.
diff --git a/hidden-classes-in-js-and-inline-caching.js b/hidden-classes-in-js-and-inline-caching.js
@@ -3,6 +3,6 @@ function Person(firstName, lastName) {
   this.lastName  = lastName;
 }
 
-var ironMan        = new Person(“Tony”,  “Stark”);
-var captainAmerica = new Person(“Steve”, “Rogers”);
+var ironMan        = new Person('Tony',  'Stark');
+var captainAmerica = new Person('Steve', 'Rogers');
 captainAmerica.age = 87;
diff --git a/hidden-classes-in-js-and-inline-caching.js b/hidden-classes-in-js-and-inline-caching.js
@@ -0,0 +1,8 @@
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName  = lastName;
+}
+
+var ironMan        = new Person(“Tony”,  “Stark”);
+var captainAmerica = new Person(“Steve”, “Rogers”);
+captainAmerica.age = 87;