Understand Google V8 engine for writing better Javascript code

1. V8 Engine
Septeni Technology 2018

2. Hello!
I am ThuNx
Programming & Photography
Find out more:
@hitamu

3. AGENDA
■ Overview
○ Javascript Engine
○ V8 Engine
■ Inside V8
○ Compiler Pipeline
○ Optimization Concepts
■ Conclusions

4. 1.
Overview
Javascript Engine

5. Browser at high-level

6. List of Javascript Engine
■ V8 (Google)
○ Chrome
○ Node.js
■ Chakra (Microsoft)
○ IE
○ Edge
■ Spidermonkey (Mozilla)
○ Firefox
■ JavaScriptCore (Apple)
○ Safari

7. Chrome V8 Engine
V8 Engine
■ V8 is Google's open source.
■ V8 is written in C++ and is used
in Google Chrome
■ V8 is embed in Node.js

8. V8 in Chrome & Node.js
V8
Engine
V8
Engine
core libraryRendering Engine
Networking
libuv

9. V8’s Performance
■ Fast Property Access
■ Dynamic Machine Code Generation *
■ Efficient Garbage Collection

10. 2.
Inside V8 Engine
Compiler Pipeline
Optimization
Concepts

11. 2.1
Compiler Pipeline
A brief history of time...

12. Compiler pipeline (2010)
Full-
Codegen
Unoptimized
Code
Crankshaft
Optimized
Code
Parser
Abstract
Syntax Tree
JavaScript
Source Code
OptimizedBaseline

13. Compiler pipeline (2014)
Full-
Codegen
Unoptimized
Code
Crankshaft
Optimized
Code
TurboFan
Parser
Abstract
Syntax Tree
JavaScript
Source Code
OptimizedBaseline

14. Compiler pipeline (2016)
Full-
Codegen
Unoptimized
Code
Crankshaft
Optimized
Code
TurboFan
Parser
Abstract
Syntax Tree
Ignition
Bytecode
JavaScript
Source Code
OptimizedBaselineInterpreted

15. Compiler pipeline (2017 and future)
Optimized
Code
TurboFan
Parser
Abstract
Syntax Tree
Ignition
Bytecode
JavaScript
Source Code
OptimizedInterpreted

16. 2.2
Optimization Concepts
Hidden Class
Inlining Cache

17. Hidden Class

18. Hidden Class
■ Javascript
○ Prototype based o0.__proto__.__proto__
○ Change type at runtime
○ => Hard to track object & variables
■ Hidden class
○ Internal representation of the type system
○ => Fast property access

19. function Point(x, y) {
this.x = x;
this.y = y;
}
const p1 = new Point(12, 3);
const p2 = new Point(5, 9);
const p3 = new Point(12);
const hero = { name: 'Superman' };
Javascript Code

20. // The JavaScript engine's dictionary
// storing the objects
const allObjects = {
o0: { x: 12, y: 3, __proto__: 'p6a1251' }, //p1
o1: { x: 5, y: 9, __proto__: 'p6a1251' }, //p2
o2: { x: 12 , __proto__: 'p6a1251' }, //p3
// Object{
// constructor: Point(x, y),
// __proto__: Object{constructor: Object()}
// }
o3: { name: ‘Superman’, __proto__: 'p419ecc' },
// Object{constructor: Object()}
//hero
}
}
Dynamic lookup

21. Hidden Class
function Point(x, y) {
this.x = x;
this.y = y;
}

22. Hidden Class
const p1 = new Point(13, 37);
=> this.x = 13

23. Hidden Class
const p1 = new Point(13, 37);
=> this.y = 37

24. Hidden Class
const p5 =
new Point(13, 37);
p5.a = 'a';
const p6 =
new Point(13, 37);
p6.b = 'b';

25. Hidden Class
/* C2 */ const p1 = new Point(13, 37);
/* C1 */ const p2 = new Point(2);
/* C0 */ const p3 = new Point();
/* C2 */ const p4 = new Point(4, 2);

26. Optimization tips
■ Avoid using delete
○ Won’t be backed by hidden class
■ Init object in the same order
○ Same hidden classes, same transitions
■ Avoid adding properties after the object
creation
○ If need: Adding in order of props

27. Inline Caching

28. Inline Caching
/* C2 */ const p1 = new Point(13, 37);
/* C1 */ const p2 = new Point(2);
/* C0 */ const p3 = new Point();
/* C2 */ const p4 = new Point(4, 2);

29. Inline Cache
■ Monomorphic
○ single shape
○ fastest possible IC
■ Polymorphic
○ more than one shape
○ linear search among cached entries
■ Megamorphic
○ too many shapes
○ slowest ICs, hitting global cache

30. Optimization tips
■ Prefer Monomorphism than Polymorphism
■ Same method repeatedly over many different method
only once

31. Conclusion

32. Optimization tips
■ Avoid using delete
■ Init object in the same order
■ Avoid adding properties after the object
creation
■ Prefer Monomorphism than
Polymorphism
■ Same method repeatedly over many
different method only once

33. Digging Deeper
● Deeper in Inline Caching
● Type Feedback, Type Guard
● Intermediate Representation, Deoptimization
● Garbage Collection

34. References
● http://mrale.ph/blog/2015/01/11/whats-up-with-
monomorphism.html
● http://mrale.ph/blog/2012/06/03/explaining-js-vms-in-
js-inline-caches.html
● https://draft.li/blog/2016/12/22/javascript-engines-
hidden-classes/
● https://github.com/v8/v8/wiki/Design%20Elements
● Google I/O 2016, 2017
● https://v8project.blogspot.com/

35. THANK YOU