Talk at ViennaJS about JavaScript Engines. Covers the interplay between Interpreter and Compiler. Inline Caching is explained by using code examples. Attention: In the slide "Final Advice" there might be a misunderstanding with "Use Classes instead of object literals". Be aware that JavaScript Classes are not the same as Hidden Classes. You can still end up having polymorphic cache or worse if properties are not the same.

1. JavaScript Engines
Essentials for Developers
ViennaJS
31.1.2018
Rainer Hahnekamp
https://www.rainerhahnekamp.com
@rainerhahnekamp
rainer.hahnekamp@gmail.com

2. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Code Example 1: Execution Time ~ 1.2s
(() => {
let han = {firstname: "Han", lastname: "Solo"};
let luke = {firstname: "Luke", lastname: "Skywalker"};
let leia = {firstname: "Leia", lastname: "Organa"};
let obi = {firstname: "Obi", lastname: "Wan"};
let persons = [
han, luke, leia, obi,
han, luke, leia, obi];
let getName = (person) => person.lastname;
console.time("engine");
for(var i = 0; i < 1000 * 1000 * 1000; i++) {
getName(persons[i & 7]);
}
console.timeEnd("engine");
})();

3. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Code Example 2: Execution Time ~ 1.8s
(() => {
let han = {firstname: "Han", lastname: "Solo", spaceship: "Falcon"};
let luke = {firstname: "Luke", lastname: "Skywalker"};
let leia = {firstname: "Leia", lastname: "Organa"};
let obi = {firstname: "Obi", lastname: "Wan"};
let persons = [
han, luke, leia, obi,
han, luke, leia, obi];
let getName = (person) => person.lastname;
console.time("engine");
for(var i = 0; i < 1000 * 1000 * 1000; i++) {
getName(persons[i & 7]);
}
console.timeEnd("engine");
})();

4. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Code Example 3: Execution Time ~ 8.4s
(() => {
let han = {firstname: "Han", lastname: "Solo", spacecraft: "Falcon"};
let luke = {firstname: "Luke", lastname: "Skywalker", job: "Jedi"};
let leia = {firstname: "Leia", lastname: "Organa", gender: "female"};
let obi = {firstname: "Obi", lastname: "Wan", retired: true};
let yoda = {lastname: "Yoda"};
let persons = [
han, luke, leia, obi,
yoda, luke, leia, obi];
let getName = (person) => person.lastname;
console.time("engine");
for(var i = 0; i < 1000 * 1000 * 1000; i++) {
getName(persons[i & 7]);
}
console.timeEnd("engine");
})();

5. Rainer Hahnekamp @ ViennaJS, 31. January 2017
What is a JavaScript Engine
● Executes JavaScript Source Code
● Bundled in the browser, but can be run separately
● It is not the Rendering Engine
● Until V8 only interpreted

6. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Design of Modern Engines

7. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Design of Modern Engines
let getName = (person) => person.lastname;
let han = {firstname: "Han", lastname: "Solo"};
let luke = {firstname: "Luke", lastname: "Skywalker"};
let leia = {firstname: "Leia", lastname: "Organa"};
let obi = {firstname: "Obi", lastname: "Wan"};
let persons = [han, luke, leia, obi];
for(var i = 0; i < 1000 * 1000 * 1000; i++) {
getName(persons[i & 3]);
}
Source Code
JavaScript Engine
Interpreter
Compiler (JIT)
Machine CodeOptimisation Step
Optimisation Step
Optimisation Step

8. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Integrating Static Types
during Runtime
Inline Caching
http://www.taproot.com/archives/60650

9. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Execution as Interpreter (Pre V8 Time)
function getName(person)
han
firstname lastname
luke
firstname lastname
leia
firstname lastname
obi
firstname lastname
lastname
1. search for memory location of
property lastname
2. return value of lastname

10. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Interpreter with Hidden Classes
function getName(person)
han
firstname lastname
luke
firstname lastname
leia
firstname lastname
obi
firstname lastname
lastname
1. search for memory location of
property lastname
2. return value of lastname
Recording all hidden
classes passed to that
function.
Hidden Class: p1
firstname
lastname

11. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Compilation Phase
function getName(person)
1. search for memory location of
property lastname
2. return value of lastname
only hidden class p1
is passed
Just-in-Time Compiler
function getName(person: p1)
1. return known location of
lastname from p1
Machine Code

12. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Optimised & Compiled Code with
Monomorphic Inline Cache
function getName(person: p1)
han
firstname lastname
luke
firstname lastname
leia
firstname lastname
obi
firstname lastname
lastname
1. return known location of lastname
from p1
Hidden Class: p1
firstname
lastname
Machine Code

13. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Optimised & Compiled Code with
Polymorphic Inline Cache
function getName(person: p1 | p2)
han
firstname
lastname
luke
firstname lastname
leia
firstname lastname
obi
firstname lastname
lastname
1. if person is p1, return known from
p1
2. if person is p2, return known
location from p2
Hidden Class: p1
firstname
lastname
Machine Code
spaceship
Hidden Class: p2
spaceship

14. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Inline Caching
● Monomorphic
○ Hidden Classes: 1
○ Duration: 1.2s
● Polymorphic
○ Hidden Classes: 2 - 4
○ Duration: 1.8s - 2.4s
● Megamorphic
○ Hidden Classes: > 4
○ Duration: 8.4s

15. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Code Example 4: Execution Time ~ 1.2s
(() => {
class Person {
constructor(firstname, lastname, spaceship, job, gender, retired) {
this.firstname = firstname;
this.lastname = lastname;
this.spaceship = spaceship;
this.job = job;
this.gender = gender;
this.retired = retired;
}
}
let han = new Person("Han", "Solo", "Falcon");
let luke = new Person("Luke", "Skywalker", null, "Jedi");
let leia = new Person("Leia", "Organa", null, null, "female");
let obi = new Person("Obi", "Wan", null, null, null, true);
let yoda = new Person(null, "Yoda");
let persons = [han, luke, leia, obi, yoda, luke, leia, obi];
let getName = (person) => person.lastname;
console.time("engine");
for(var i = 0; i < 1000 * 1000 * 1000; i++) {
getName(persons[i & 7]);
}
console.timeEnd("engine");
})();

16. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Final Advice
● Use Classes instead of object literals
● Use a Transpiler with support for Static Types (TypeScript,...)
● Don’t outsmart the Engine

17. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Further Reading 1/2
● David Mark Clements: Performance Killers for TurboShift and Ignition:
https://github.com/davidmarkclements/v8-perf
● Victor Felder: JavaScript Engines Hidden Classes
https://draft.li/blog/2016/12/22/javascript-engines-hidden-classes
● Jörg W. Mittag: Overview of JIT Compiler and Interpreter
https://softwareengineering.stackexchange.com/questions/246094/understanding-
the-differences-traditional-interpreter-jit-compiler-jit-interp/269878#269878
● Vyacheslav Egorov: What’s up with Monomorphism
http://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html

18. Rainer Hahnekamp @ ViennaJS, 31. January 2017
Further Reading 2/2
● WebComic explaining Google Chrome
https://www.google.com/googlebooks/chrome/big_00.html
● Huiren Woo: Differences between V8 and ChakraCore
https://developers.redhat.com/blog/2016/05/31/javascript-engine-performance-comparison-
v8-charkra-chakra-core-2/
● Seth Thompson: V8, Advanced JavaScript, & the Next Performance Frontier
https://www.youtube.com/watch?v=EdFDJANJJLs
● Franziska Hinkelmann - Performance Profiling for V8
https://www.youtube.com/watch?v=j6LfSlg8Fig
● Benedikt Meurer: An Introduction to Speculative Optimization in V8
https://ponyfoo.com/articles/an-introduction-to-speculative-optimization-in-v8