Google V8 engine

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 library Rendering 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 Optimized Baseline Optimize Deoptimize

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

14. Compiler pipeline (2016) Full- Codegen Unoptimized Code Crankshaft Optimized Code TurboFan Parser Abstract Syntax Tree Ignition Bytecode JavaScript Source Code Optimized Baseline Interpreted Optimize Deoptimize Baseline (Low-end Android)

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

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