Javascript Performance Tricks
1 like1,322 views
The document discusses various JavaScript performance tricks. It includes benchmarks comparing different approaches to evaluation, string concatenation, loops, nested object properties, reusing array references, overusing closures, minimizing events, timers, adding elements to the DOM, updating CSS styles, and selectors. Charts are provided showing performance comparisons across browsers for each technique.
![String Concatenation
foo = foo + bar
foo += bar
[].join(’’)
20,000,000 18,817,419
15,000,000
9,940,504
10,000,000
6,348,293
5,000,000 4,503,838 4,191,713
1,359,961
825,543
435,988 347,348 443,218
0
Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1](https://image.slidesharecdn.com/javascriptperformancetricks-120911152523-phpapp01/85/Javascript-Performance-Tricks-4-320.jpg)
![String Concatenation
foo = foo + bar
foo += bar
[].join(’’)
foo.concat(bar)
93,236,430
56,781,122
18,817,419 21,484,919
4,503,838 5,878,675
1,320,424
347,348 1,493,283 443,218
Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1](https://image.slidesharecdn.com/javascriptperformancetricks-120911152523-phpapp01/85/Javascript-Performance-Tricks-5-320.jpg)
![String Concatenation
foo = foo + bar
foo += bar
[].join(’’)
foo.concat(bar)
93,236,430
56,781,122
21,484,919
9,940,504
6,348,293 4,191,713 5,878,675
435,988 1,320,424 1,359,961
Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1](https://image.slidesharecdn.com/javascriptperformancetricks-120911152523-phpapp01/85/Javascript-Performance-Tricks-6-320.jpg)
![Reuse Array Refs
foo = [1]
foo.length = 0; foo.push(1)
300,000,000
221,911,826
225,000,000
150,000,000
75,000,000
10,688,860 10,964,912 18,867,925
1,311,286 1,670,314
0
Chrome 21 Firefox 12 IE9](https://image.slidesharecdn.com/javascriptperformancetricks-120911152523-phpapp01/85/Javascript-Performance-Tricks-13-320.jpg)
![Reuse Array Refs
foo = [1]
foo.length = 0; foo.push(1)
18,867,925 1,670,314
1,311,286
221,911,826
10,964,912
10,688,860
Chrome 21 Firefox 12 IE9](https://image.slidesharecdn.com/javascriptperformancetricks-120911152523-phpapp01/85/Javascript-Performance-Tricks-14-320.jpg)
![Reuse Array Refs
foo = [1]
foo.length = 0; foo.push(1)
49,678,120
2,493,830
1,030,567
14,644,518
Desktop Safari 5 Mobile Safari iPhone 4S 5.1.1](https://image.slidesharecdn.com/javascriptperformancetricks-120911152523-phpapp01/85/Javascript-Performance-Tricks-15-320.jpg)
Javascript Performance Tricks
- 1. JavaScript Performance Tricks Grgur Grisogono - @ggrgur
- 2. Evaluation eval(foo) vs (new Function(foo))()
- 3. Evaluation eval(foo) (new Function(foo))() 6,000 5,256 4,500 3,000 1,500 1,081 97 79 110 160 42 47 0 Chrome 21 Firefox 12 IE8 IE7
- 4. String Concatenation foo = foo + bar foo += bar [].join(’’) 20,000,000 18,817,419 15,000,000 9,940,504 10,000,000 6,348,293 5,000,000 4,503,838 4,191,713 1,359,961 825,543 435,988 347,348 443,218 0 Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1
- 5. String Concatenation foo = foo + bar foo += bar [].join(’’) foo.concat(bar) 93,236,430 56,781,122 18,817,419 21,484,919 4,503,838 5,878,675 1,320,424 347,348 1,493,283 443,218 Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1
- 6. String Concatenation foo = foo + bar foo += bar [].join(’’) foo.concat(bar) 93,236,430 56,781,122 21,484,919 9,940,504 6,348,293 4,191,713 5,878,675 435,988 1,320,424 1,359,961 Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1
- 9. Loops
- 10. Loops for loop while loop 900,000 675,000 450,000 225,000 0 Chrome 21 Firefox 12 IE9
- 12. Nested Object Properties deep shallow 60,000,000 45,000,000 30,000,000 15,000,000 0 Chrome 21 Firefox 12 Desktop Safari 5
- 13. Reuse Array Refs foo = [1] foo.length = 0; foo.push(1) 300,000,000 221,911,826 225,000,000 150,000,000 75,000,000 10,688,860 10,964,912 18,867,925 1,311,286 1,670,314 0 Chrome 21 Firefox 12 IE9
- 14. Reuse Array Refs foo = [1] foo.length = 0; foo.push(1) 18,867,925 1,670,314 1,311,286 221,911,826 10,964,912 10,688,860 Chrome 21 Firefox 12 IE9
- 15. Reuse Array Refs foo = [1] foo.length = 0; foo.push(1) 49,678,120 2,493,830 1,030,567 14,644,518 Desktop Safari 5 Mobile Safari iPhone 4S 5.1.1
- 17. Minimize Number of Events
- 18. Minimize Number of Events
- 19. Timers 0 10 ms timer #1 started Time in ms Screen resized 10 Main JS code execution Timer #1 has expired 20 Screen resize event handler 10 ms timer #2 started 30 Timer #1 handler Timer #2 has expired 40 Timer #2 handler 10ms timer #3 started 50 Timer #3 handler
- 20. Adding Elements To DOM
- 21. Adding Elements To DOM
- 22. Adding Elements To DOM
- 23. Adding Elements To DOM
- 24. Adding Elements To DOM innerHTML DOM methods/replaceChild DOM/cloneNode DocumentFragment 15,000 11,250 7,500 3,750 0 Chrome 21 Firefox 12 IE8 Safari Opera Mobile Safari
- 26. Updating CSS Styles style cssText 70,000 52,500 35,000 69,621 62,893 58,388 40,058 17,500 0 Chrome 21 Firefox 12
- 27. Selectors
- 28. Selectors table #menu .first li.first #menu .first #menu > li.first div#div1 table #menu li.first 1,500,000 1,125,000 750,000 375,000 0 Chrome 21 Desktop Safari 5 Firefox 12 IE9
- 29. Questions?
Editor's Notes
- #2: About me - MC, Ext JS in Action SE, History, SDC, Sencha \n
- #3: \n
- #4: Hard to debug, slow, ... But sometimes necessary (JSON)\nMobile, JSON Decode\n54x faster\nops/sec benchmark.js (jsperf style)\n
- #5: Dynamic array creation can be slow\n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: a=1 for minimal noise during benchmarks\n
- #11: \n
- #12: Straight forward, but let’s examine the impact\n
- #13: \n
- #14: \n
- #15: 2000%\n\n
- #16: 2000%\n\n
- #17: \n
- #18: Bubbling - delegation\nCommon for Ext JS / Sencha Touch DataView/List items\n
- #19: Bubbling - delegation\nCommon for Ext JS / Sencha Touch DataView/List items\n
- #20: Fight the unresponsive dialogue\nVisually speed up long tasks (esp with dom manipulation)\n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: CSS class selectors are the slowest, ID are the fastest\n
- #30: \n