Extreme JavaScript Performance
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Extreme JavaScript Performance

am

  • 75,177 Views

Talk given at http://jsconf.eu 2009. ...

Talk given at http://jsconf.eu 2009.

You serve up your code gzipped. Your caches are properly configured. Your data (and scripts) are loaded on-demand. That's awesome—so don't stop there. Runtime is another source of slowdowns, and you can learn to conquer those, too.

Learn how to benchmark your code to isolate performance issues, and what to do when you find them. The techniques you'll learn range from the normal (function inlining) to the extreme (unrolling loops).

Statistiken

Views

Gesamtviews
75,177
Views auf SlideShare
65,050
Views einbetten
10,127

Actions

Gefällt mir
267
Downloads
1,531
Kommentare
16

112 Einbettungen 10,127

http://mir.aculo.us 4919
http://www.globalnerdy.com 634
http://blog.dreamcss.com 585
http://odesenvolvedor.andafter.org 461
http://m.ignev.net 425
http://andafter.org 353
http://www.jornaljava.com 313
https://www.ibm.com 231
http://www.andafter.org 221
http://developer.yahoo.net 196
http://www.slideshare.net 172
http://www.fastjavascript.com 148
http://www.parenthese.be 143
http://polavenki.blogspot.com 120
http://itseer.blogspot.tw 117
http://developer.yahoo.com 99
http://blogs.msdn.com 96
http://moskalyuk.name 91
http://www.freakzion.com 88
http://polavenki.blogspot.in 87
http://jaydson.org 61
http://forum.dred.vn 48
http://www.ajaxfreak.com 38
http://www.techpresentations.org 38
http://cf.danielkoch.de 24
http://giu.me 22
http://samysin.blogspot.com 21
http://beta.jolicloud.co 19
http://acuriousanimal.orggeo.net 19
http://www.techgig.com 18
http://paper.li 16
http://itseer.blogspot.com 13
https://twitter.com 12
http://www.samysin.blogspot.com 12
http://www.alumno40.tk 12
http://alumno40.tk 12
http://lla-tuoba.blogspot.com 11
http://www.scoop.it 11
http://lj-toys.com 11
https://developer.yahoo.com 10
http://localhost 10
http://vhalate.dev-amgrade.com 10
http://www.acuriousanimal.com 10
http://www.cesarpallares.com.br 10
http://hi.chibaole.com 9
http://jotarun.posterous.com 7
http://plaksyuk.blogspot.com 7
http://www.iweb34.com 7
http://twitter.com 6
http://webcache.googleusercontent.com 5
Mehr ...

Zugänglichkeit

Kategorien

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen

15 von 16 Kommentar posten

  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • Thank you very much, it's very useful :)
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • thank you for this document
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • Thanks
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • Tank you!
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
  • Great work.

    Thanks for sharing.
    http://www.clickandsendparcel.com
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

Extreme JavaScript Performance Presentation Transcript

  • 1. Thomas Fuchs @thomasfuchs Extreme JavaScript Performance
  • 2. DO NOT, EVER, OPTIMIZE PREMATURELY
  • 3. http://tr.im/extremejs
  • 4. SpiderMonkey
  • 5. SpiderMonkey JavaScriptCore
  • 6. SpiderMonkey JavaScriptCore JScript
  • 7. SpiderMonkey JavaScriptCore JScript V8
  • 8. #1 avoid function calls
  • 9. function  methodCall(){    function  square(n){  return  n*n  };    var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  square(i); } function  inlinedMethod(){      var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  i*i; }
  • 10. function  methodCall(){    function  square(n){  return  n*n  };    var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  square(i); } function  inlinedMethod(){      var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  i*i; }
  • 11. function  methodCall(){    function  square(n){  return  n*n  };    var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  square(i); } function  inlinedMethod(){      var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  i*i; }
  • 12. methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.027s 0.016s
  • 13. methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.027s 0.016s
  • 14. methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.027s 0.016s
  • 15. methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.027s 0.016s
  • 16. methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.027s 0.016s
  • 17. IE8 throws this warning after 1 second
  • 18. #2 embrace the language
  • 19. function  literals(){    var  a  =  [],  o  =  {}; } function  classic(){    var  a  =  new  Array,  o  =  new  Object; }
  • 20. classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
  • 21. classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
  • 22. classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
  • 23. classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
  • 24. classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
  • 25. >  parseInt(12.5); 12
  • 26. >  ~~(1  *  "12.5") 12
  • 27. double bitwise NOT* floors the number >  ~~(1  *  "12.5") 12 1 * string coerces the string into a float, result = 12.5 *good overview on http://tr.im/bitwise
  • 28. parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
  • 29. parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
  • 30. parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
  • 31. parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
  • 32. parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
  • 33. Firefox is 30x faster than Safari parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
  • 34. #3 loops
  • 35. var  test  =  ''; for  (var  i  =  0;i<10000;i++)  test  =  test  +  str; var  test  =  '',  i  =  10000; while(i-­‐-­‐)  test  =  test  +  str;
  • 36. for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
  • 37. for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
  • 38. for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
  • 39. for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
  • 40. for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
  • 41. 3 expressions in “for” var  test  =  ''; for  (var  i  =  0;i<10000;i++)  test  =  test  +  str; var  test  =  '',  i  =  10000; while(i-­‐-­‐)  test  =  test  +  str; 1 expression in “while” (when i equals 0, expression will be false)
  • 42. function  normalLoop(){    var  i=60,  j=0;    while(i-­‐-­‐)  j++; }
  • 43. function  unrolledLoop(){    var  j=0;    j++;  j++;  j++;  j++;  j++;  j++;      j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++; }
  • 44. normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s 0.001s
  • 45. normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s 0.001s
  • 46. normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s 0.001s
  • 47. normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s 0.001s
  • 48. normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s 0.001s
  • 49. #4 cache globals
  • 50. function  uncached(){    var  i  =  10000;    while(i-­‐-­‐)  window.test  =  'test'; } function  cached(){    var  w  =  window,  i  =  10000;    while(i-­‐-­‐)  w.test  =  'test'; }
  • 51. uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
  • 52. uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
  • 53. uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
  • 54. uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
  • 55. uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
  • 56. Safari is 20x faster than Firefox uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
  • 57. uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s Now IE works with >1s durations. WTF?
  • 58. #5 expression tuning
  • 59. var  b  =  false,  n  =  99; function(){    return  n*n  &&  b; } function(){    return  b  &&  n*n; }
  • 60. var  b  =  false,  n  =  99; function(){    return  n*n  &&  b; } function(){    return  b  &&  n*n; } b is false, so n*n doesn’t need to get evaluated
  • 61. not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
  • 62. not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
  • 63. not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
  • 64. not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
  • 65. not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
  • 66. not a pure engine optimization, the execution actually stops here, n=2 needs to be evaluated, >>>  var  n  =  1; so n is set to 2 undefined >>>  if(true  &&  (n=2))  ...; >>>  n 2 >>>  if(true  ||  (n=3))  ...; >>>  n here it doesn’t 2 (expression must be true), so n is NOT set to 3
  • 67. #6 what not to use
  • 68. function(){    var  obj  =  {  prop:  'test',  str:  ''  };    with(obj){          var  i  =  10000;        while(i-­‐-­‐)  str  +=  prop;        return  str;    } } function(){    var  obj  =  {  prop:  'test',  str:  ''  },  i  =  10000;    while(i-­‐-­‐)  obj.str  +=  obj.prop;    return  obj.str; }
  • 69. with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s
  • 70. with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s
  • 71. with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s
  • 72. with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s
  • 73. with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s
  • 74. var  a  =  0; function(){    try{        a  +=  1;    }  catch(e)  {} } function(){    a  +=  1; }
  • 75. try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
  • 76. try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
  • 77. try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
  • 78. try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
  • 79. try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
  • 80. no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5
  • 81. no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5
  • 82. no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5
  • 83. no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5
  • 84. no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5
  • 85. Modern JavaScript engines have JIT compilers, which don’t support certain features well
  • 86. Avoid stuff that’s not available in ECMA-262 5th Edition “strict” mode, see John’s blog post
  • 87. Avoid stuff that’s not available in ECMA-262 5th Edition “strict” mode, see John’s blog post http://tr.im/ecma262
  • 88. alert((function(){return"alert (("+arguments.callee.toString() .replace(/s/g,"")+")());";})());
  • 89. alert((function(){return"alert (("+arguments.callee.toString() .replace(/s/g,"")+")());";})());
  • 90. (function(){  return  2  *  3;  }).toString();
  • 91. function  ()  {  return  2  *  3;  }
  • 92. function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  }
  • 93. function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  }
  • 94. function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  6;  }
  • 95. function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  6;  } WTF?
  • 96. More in http://jsrocks.com
  • 97. More in http://jsrocks.com
  • 98. DO NOT, EVER, OPTIMIZE PREMATURELY
  • 99. Q&A And thanks! http://javascriptrocks.com/ @thomasfuchs on twitter