Helping Your Compiler Help You

A short overview of how monomorphism and polymorphism affects how compilers optimise JavaScript code.

Links:
- Turbolizer: https://github.com/v8/v8/tree/master/tools/turbolizer
- Franziska's "JavaScript Engines: How Do They Even?" talk: https://www.youtube.com/watch?v=p-iiEDtpy6I
- Matthias' "JavaScript Engine Fundamentals: Shapes & Inline Classes" blogpost: https://mathiasbynens.be/notes/shapes-ics
- Paul's "Debugging Node.js with Chrome DevTools" blogpost: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27

Transcript

1. Helping Your Compiler Help You (or “one trick for optimising JS”)
2. I’m Quil. I love languages. (aka @robotlolita)
3. I’m Quil. I love languages. (aka @robotlolita) Not just programming, I’m learning Japanese and Swedish.
4. NO ASSEMBLIES will be shown during this talk! ( x86/ARM )
5. Let’s talk about VMs of the JavaScript kind, specifically.
6. IN THIS TALK We’ll look into one very important compiler concept: Monomorphism
7. When should you care? CPU-HEAVY Your bottleneck is the CPU cycles. OPTIMAL There’s no better algorithm complexity for the problem. UNCACHEABLE Caching is not a solution*.
8. When should you care? a non-exhaustive list • Game development • Animation • Data processing • Generic libraries • etc
9. Consider this code example:
10. extremely polymorphic!!! Consider this code example:
11. Let’s dive deeper!
12. function add(point1, point2): V1 = Project Field (point1, “x”); V2 = Project Field (point2, “x”); V3 = Plus Operator (V1, V2); (...) V7 = New (Point2d, V3, V6) Return (V7)
13. Project Field (point1, “x”): • Find the location of “x” within “point1” • Load the value from such memory location
14. Plus Operator (V1, V2): • if both numbers, use float addition; • if both integers, use bigint addition; • if both strings, use string concatenation; • if number and object, convert RHS to number, retry; • (...)
15. Conclusion: JavaScript is inefficient (as specified)
16. High-level, mathematical reasoning. Efficient execution in machines. Specification Implementation
17. Programs as graphs function add(p1, p2) New Point2d ($0, $1) p1.x p2.x p1.y p2.y + +
18. Inventor of the CFG, and Compiler optimisation pioneer. Frances E. Allen
19. Programs as graphs function add(p1, p2) New Point2d ($0, $1) p1.x p2.x p1.y p2.y + +
20. What are types? • number (64-bit floating points) • bigint (arbitrary-precision integers) • boolean • string • null / undefined • function • object
21. Programs as graphs (with types) function add(p1, p2) (object, object) -> object New Point2d ($0, $1) (object) p1.x (any) p2.x (any) p1.y (any) p2.y (any) + (string | number) + (string | number)
22. Precise object types (shapes/hidden classes) [“x”, “y”] 10 : number 15 : number
23. Programs as graphs (with types) function add(p1, p2) (Point2d, Point2d) -> Point2d New Point2d ($0, $1) (Point2d) p1.x (number) p2.x (number) p1.y (number) p2.y (number) float + (number) float + (number)
24. Programs as graphs (with types) function add(p1, p2) (Point2d, Point2d) -> Point2d p1.x (number) p2.x (number) p1.y (number) p2.y (number) float + (number) float + (number) { x: 10, y: 15, z: 0 }
25. Programs as graphs (with types) function add(p1, p2) (Point2d, Point2d) -> Point2d p1.x (number) p2.x (number) p1.y (number) p2.y (number) float + (number) float + (number) { x: 10, y: 15, z: 0 }
26. Programs as graphs (with types) function add(p1, p2) add(p1, p2) (Point2d, Point2d) add(p1, p2) ({x,y,z}, {x,y,z}) { x: 10, y: 15, z: 0 }
27. How many types? 1 (Monomorphic) 2+ (Polymorphic) Megamorphic Number of types flowing through the function
28. A short review...
29. THE BIG IDEA Keep your types consistent! Compilers track types and use that to optimise your code.
30. Don’t worry about cold paths. Use your time efficiently by focusing on hot and cpu-heavy operations.
31. TOOLS YOU CAN USE • Your browser’s CPU profiler • node --inspect / --inspect-brk • node --trace-* • Turbolizer
32. ADDITIONAL MATERIAL JavaScript Engines - How do They Even? JS Engine Fundamentals: Shapes and Inline Classes Debugging Node.js with Chrome DevTools
33. THAT’S ALL, FOLKS talks.robotlolita.me