Google V8 engine
Download as PPTX, PDF2 likes515 views
This document provides an overview of the V8 JavaScript engine, including its compiler pipeline and optimization concepts. It discusses how V8 is used in Chrome and Node.js, and describes its compiler pipeline which includes parsing, abstract syntax trees, bytecode generation, and optimized code generation. It also covers V8 optimization concepts like hidden classes and inline caching that allow for fast property access and optimized code execution.
Google V8 engine
- 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
- 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
- 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
Editor's Notes
- #7: JavascriptCore: underlies WebKit implementations
- #10: Most JavaScript engines use a dictionary-like data structure as storage for object properties - each property access requires a dynamic lookup to resolve the property's location in memory GC: Pause time: 4.4ms
- #19: 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. 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.
- #21: Find o0 in allObjects (lookup to resolve the object’s location in memory), Find a property named "z" in o0 (dynamic lookup to resolve the property’s location in memory) and return its value. (Should we have tried p1.x, we could have stopped here, returning 12.) Since o0 does not have a property named "z", fetch o0.__proto__ to see if it has a property named "z", otherwise look if o0.__proto__.__proto__ has a property named "z", repeat this process down the prototype chain until __proto__ is null (which means no object prototype was found).
- #23: creates a new hidden class everytime the constructor function declares a property
- #25: Directed acyclic graph