Successfully reported this slideshow.
Your SlideShare is downloading. ×

Extreme JavaScript Performance

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 105 Ad

Extreme JavaScript Performance

Download to read offline

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).

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).

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (18)

Advertisement

Similar to Extreme JavaScript Performance (20)

Advertisement

Recently uploaded (20)

Extreme JavaScript Performance

  1. Extreme JavaScript Performance Thomas Fuchs @thomasfuchs
  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. 1 * string coerces the string into a float, result = 12.5 double bitwise NOT* floors the number >  ~~(1  *  "12.5") 12 *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. parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s Firefox is 30x faster than Safari
  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. var  test  =  ''; for  (var  i  =  0;i<10000;i++)  test  =  test  +  str; var  test  =  '',  i  =  10000; while(i-­‐-­‐)  test  =  test  +  str; 3 expressions in “for” 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. uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s Safari is 20x faster than Firefox
  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. >>>  var  n  =  1; undefined >>>  if(true  &&  (n=2))  ...; >>>  n 2 >>>  if(true  ||  (n=3))  ...; >>>  n 2 not a pure engine optimization, the execution actually stops here, n=2 needs to be evaluated, so n is set to 2 here it doesn’t (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. Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5 no try/catch try/catch
  81. Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5 no try/catch try/catch
  82. Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5 no try/catch try/catch
  83. Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5 no try/catch try/catch
  84. Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 0,4 0,5 no try/catch try/catch
  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

×