Javascript Performance Tricks

1,456 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,456
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • About me - MC, Ext JS in Action SE, History, SDC, Sencha \n
  • \n
  • Hard to debug, slow, ... But sometimes necessary (JSON)\nMobile, JSON Decode\n54x faster\nops/sec benchmark.js (jsperf style)\n
  • Dynamic array creation can be slow\n
  • \n
  • \n
  • \n
  • \n
  • a=1 for minimal noise during benchmarks\n
  • \n
  • Straight forward, but let’s examine the impact\n
  • \n
  • \n
  • 2000%\n\n
  • 2000%\n\n
  • \n
  • Bubbling - delegation\nCommon for Ext JS / Sencha Touch DataView/List items\n
  • Bubbling - delegation\nCommon for Ext JS / Sencha Touch DataView/List items\n
  • Fight the unresponsive dialogue\nVisually speed up long tasks (esp with dom manipulation)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CSS class selectors are the slowest, ID are the fastest\n
  • \n
  • Javascript Performance Tricks

    1. 1. JavaScriptPerformance Tricks Grgur Grisogono - @ggrgur
    2. 2. Evaluationeval(foo) vs(new Function(foo))()
    3. 3. Evaluation eval(foo) (new Function(foo))()6,000 5,2564,5003,0001,500 1,081 97 79 110 160 42 47 0 Chrome 21 Firefox 12 IE8 IE7
    4. 4. String Concatenation foo = foo + bar foo += bar [].join(’’)20,000,000 18,817,41915,000,000 9,940,50410,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. 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,218Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1
    6. 6. String Concatenation foo = foo + bar foo += bar [].join(’’) foo.concat(bar) 93,236,430 56,781,122 21,484,9199,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
    7. 7. String Concatenation
    8. 8. String Concatenation
    9. 9. Loops
    10. 10. Loops for loop while loop900,000675,000450,000225,000 0 Chrome 21 Firefox 12 IE9
    11. 11. Nested Object Properties
    12. 12. Nested Object Properties deep shallow60,000,00045,000,00030,000,00015,000,000 0 Chrome 21 Firefox 12 Desktop Safari 5
    13. 13. Reuse Array Refs foo = [1] foo.length = 0; foo.push(1)300,000,000 221,911,826225,000,000150,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. 14. Reuse Array Refs foo = [1] foo.length = 0; foo.push(1) 18,867,925 1,670,314 1,311,286221,911,826 10,964,912 10,688,860 Chrome 21 Firefox 12 IE9
    15. 15. Reuse Array Refs foo = [1] foo.length = 0; foo.push(1) 49,678,120 2,493,830 1,030,56714,644,518 Desktop Safari 5 Mobile Safari iPhone 4S 5.1.1
    16. 16. Overusing Closures
    17. 17. Minimize Number of Events
    18. 18. Minimize Number of Events
    19. 19. Timers0 10 ms timer #1 started Time in ms Screen resized10 Main JS code execution Timer #1 has expired20 Screen resize event handler 10 ms timer #2 started30 Timer #1 handler Timer #2 has expired40 Timer #2 handler 10ms timer #3 started50 Timer #3 handler
    20. 20. Adding Elements To DOM
    21. 21. Adding Elements To DOM
    22. 22. Adding Elements To DOM
    23. 23. Adding Elements To DOM
    24. 24. Adding Elements To DOM innerHTML DOM methods/replaceChild DOM/cloneNode DocumentFragment15,00011,250 7,500 3,750 0 Chrome 21 Firefox 12 IE8 Safari Opera Mobile Safari
    25. 25. Updating CSS Styles
    26. 26. Updating CSS Styles style cssText70,00052,50035,000 69,621 62,893 58,388 40,05817,500 0 Chrome 21 Firefox 12
    27. 27. Selectors
    28. 28. Selectors table #menu .first li.first #menu .first #menu > li.first div#div1 table #menu li.first1,500,0001,125,000 750,000 375,000 0 Chrome 21 Desktop Safari 5 Firefox 12 IE9
    29. 29. Questions?

    ×