And Benchmarks For All

A talk about browsers, JavaScript, V8 and compilers.

Transcript

1. And Benchmarks For All
2. How to be faster and keep the pace.
3. Alex Navasardyan @twokul
5. What is a Benchmark?
6. the act of running a computer program, in order to assess the relative performance of an object.
7. Benchmark is a Measurement
8. What are you measuring?
9. @SciencePorn
10. History
11. 1991 Getto JavaScript
12. 2006 jQuery/Dojo/MooTools
13. jQuery vs. Dojo http://jsperf.com/mojo-of-dojo-and-jquery is jQuery better than Dojo? why use Dojo? Dojo: Twice As Fast When It Matters Most?
15. 2009 node.js
16. 2011 Embularactymerbone
17. Sane Code Structure
18. Modules
19. Sane Code Tools
20. Build tools
21. Know your tools
22. Chrome Dev Tools
24. D8 + IRHydra 2
27. Perf linter?
28. V8
29. Spider Monkey
30. Chakra
31. The code that you write is not the code that gets executed.
32. Vocabulary (for V8)
33. • Bailouts. • Deoptimizations. • Oddballs (undefined, true, null). • Monomorphic, Polymorphic.
34. Hidden classes (or maps)
35. function Person(first, last) { this.firstName = first; this.lastName = last; } ! var ironMan = new Person(‘Tony’, ‘Stark’); var captainAmerica = new Person(‘Steve’, ‘Rogers’); captainAmerica.age = 83;
36. function Person(first, last) { this.firstName = first; this.lastName = last; } ! var ironMan = new Person(‘Tony’, ‘Stark’); var captainAmerica = new Person(‘Steve’, ‘Rogers’); captainAmerica.age = 83;
37. function Person(first, last) { this.firstName = first; this.lastName = last; } ! var ironMan = new Person(‘Tony’, ‘Stark’); var captainAmerica = new Person(‘Steve’, ‘Rogers’); captainAmerica.age = 83; Class C0
38. function Person(first, last) { this.firstName = first; this.lastName = last; } ! var ironMan = new Person(‘Tony’, ‘Stark’); var captainAmerica = new Person(‘Steve’, ‘Rogers’); captainAmerica.age = 83; Class C1:C0
39. function Person(first, last) { this.firstName = first; this.lastName = last; } ! var ironMan = new Person(‘Tony’, ‘Stark’); var captainAmerica = new Person(‘Steve’, ‘Rogers’); captainAmerica.age = 83; Class C2:C1
40. function Person(first, last) { this.firstName = first; this.lastName = last; } ! var ironMan = new Person(‘Tony’, ‘Stark’); var captainAmerica = new Person(‘Steve’, ‘Rogers’); captainAmerica.age = 83; Class C2:C1
41. function Person(first, last) { this.firstName = first; this.lastName = last; } ! var ironMan = new Person(‘Tony’, ‘Stark’); var captainAmerica = new Person(‘Steve’, ‘Rogers’); captainAmerica.age = 83; Class C3:C2
42. • initialize object members in constructor functions. • always initialize object members in the same order (different hidden class trees).
43. Numbers (and tagging)
44. • 32 bit are used to represent both a number and an object (to use the same code path). • last bit is 0 (number), 31 bit signed integer. • last bit is 1 (object). • if bigger than 31 bit, it creates a pointer to a new object.
45. • use 31 bit signed integers to avoid boxing.
46. Arrays (and objects)
47. • Fast Elements, linear storage buffer. • Dictionary Elements, hash table storage.
48. • use contiguous index starting at 0. • don’t preallocate large arrays. • don’t delete elements in arrays. • use array literals.
49. Compilers
50. • Full Compiler. • Optimizing Compiler, Crankshaft.
51. Inline Cache (optimization)
52. var ironMan = new Person(‘Tony’, ‘Stark’); ! console.log(ironMan.firstName);
53. push [ebp+0x8] mov eax,[ebp+0xc] mov edx, eax mov ecx, 0x60b55dd1 call LoadIC_Initialize ;; ironMan.firstName
54. push [ebp+0x8] mov eax,[ebp+0xc] mov edx, eax mov ecx, 0x60b55dd1 call 0x311286e0 ;; ironMan.firstName
55. More optimizations
56. var a = “12342234”, b, start = Date.now(); ! for (var i = 0; i < 1000; i++) { b = ~~a; } ! console.log(Date.now() - start); Convert string to a number
57. var a, b, start = Date.now(); ! for (var i = 0; i < 1000; i++) { b = ~~“12342234”; } ! console.log(Date.now() - start); Inlines the string
58. var a, b, start = Date.now(); ! for (var i = 0; i < 1000; i++) { b = 12342234; } ! console.log(Date.now() - start); Inlines the converted value
59. var a, b, start = Date.now(); ! for (var i = 0; i < 1000; i++) { // benchmarking the assignment b = 12342234; } ! console.log(Date.now() - start); Constant Propagation
60. var a = Date.now().toString(); var b, start = Date.now(); ! for (var i = 0; i < 1000; i++) { b = ~~a; } ! console.log(Date.now() - start); Convert string to a number
61. var a = Date.now().toString(); var b, start = Date.now(); ! var c = ~~a; for (var i = 0; i < 1000; i++) { b = c; } ! console.log(Date.now() - start); Hoists the conversion
62. var a = Date.now().toString(); var b, start = Date.now(); ! var c = ~~a; for (var i = 0; i < 1000; i++) { // benchmarking the assignment b = c; } ! console.log(Date.now() - start); Loop Invariant Motion
63. var start = Date.now(); ! for (var i = 0; i < 1000; i++) { // happy benchmarking } ! console.log(Date.now() - start); Dead Code Elimination
64. var add = function(a, b, c, d) { return a + b + c + d; }; ! for (var i = 0; i < 1000; i++) { add(“a”, “b”, “c”, “d"); } Function inlining
65. for (var i = 0; i < 1000; i++) { “a” + “b” + “c” + “d” } Function inlining
66. for (var i = 0; i < 1000; i++) { “a” + “b” + “c” + “d” } ! for (var i = 0; i < 1000; i++) { // happy benchmarking } Benchmarking inlining
67. Algorithmic
68. The power of your optimization comes from right data structures and algorithms.
69. Fix what matters
70. Benchmarks tips
71. • leave your laptop plugged in. • close all running applications. • be prepared for the results to be inconsistent.
72. Thanks!