Thomas Fuchs @thomasfuchs Extreme JavaScript Performance
DO NOT, EVER, OPTIMIZE PREMATURELY
http://tr.im/extremejs
SpiderMonkey
SpiderMonkey JavaScriptCore
SpiderMonkey JavaScriptCore JScript
SpiderMonkey JavaScriptCore JScript V8
#1 avoid function calls
function  methodCall(){    function  square(n){  return  n*n  };    var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +...
function  methodCall(){    function  square(n){  return  n*n  };    var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +...
function  methodCall(){    function  square(n){  return  n*n  };    var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +...
methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.02...
methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.02...
methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.02...
methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.02...
methodCall() inlinedMethod() 0.410s 0.150s 0.056s 0.045s uhm,  hmm† 0.128s 0.02...
IE8 throws this warning after 1 second
#2 embrace the language
function  literals(){    var  a  =  [],  o  =  {}; } function  classic(){    var  a  =  new  Array,  o  =  new  Object;...
classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
classic() literals() 0.291s 0.265s 0.020s 0.016s 0.220s 0.185s 0.024s 0.010s
>  parseInt(12.5); 12
>  ~~(1  *  "12.5") 12
double bitwise NOT* floors the number >  ~~(1  *  "12.5") 12 1 * string coerces the ...
parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
parseInt() weird  stuff 0.003s 0.002s 0.088s 0.081s uhm,  hmm† 0.547s 0.109s 0.282s
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 parseInt() weird  stuff 0.003s 0.002s 0.088s ...
#3 loops
var  test  =  ''; for  (var  i  =  0;i<10000;i++)  test  =  test  +  str; var  test  =  '',  i  =  10000; while(i-­‐-­‐)...
for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
for  loop while  loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s
3 expressions in “for” var  test  =  ''; for  (var  i  =  0;i<10000;i++)  test  =  test  +  str; var  test  =  '',  i ...
function  normalLoop(){    var  i=60,  j=0;    while(i-­‐-­‐)  j++; }
function  unrolledLoop(){    var  j=0;    j++;  j++;  j++;  j++;  j++;  j++;      j++;  j++;  j++;  j++;  j++;  j++;  ...
normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s ...
normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s ...
normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s ...
normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s ...
normalLoop() unrolledLoop() 0.023s 0.010s 0.003s 0.001s 0.032s 0.015s 0.005s ...
#4 cache globals
function  uncached(){    var  i  =  10000;    while(i-­‐-­‐)  window.test  =  'test'; } function  cached(){    var  w ...
uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s 0.48s 0.16s
Safari is 20x faster than Firefox uncached cached 1.440s 0.825s 0.07s ...
uncached cached 1.440s 0.825s 0.07s 0.07s 2.22s 2.19s ...
#5 expression tuning
var  b  =  false,  n  =  99; function(){    return  n*n  &&  b; } function(){    return  b  &&  n*n; }
var  b  =  false,  n  =  99; function(){    return  n*n  &&  b; } function(){    return  b  &&  n*n; } ...
not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
not  tuned tuned 0.005s 0.004s 0.011s 0.010s 0.906s 0.391s 0.037s 0.021s
not a pure engine optimization, the execution actually stops here, n=2 needs to ...
#6 what not to use
function(){    var  obj  =  {  prop:  'test',  str:  ''  };    with(obj){          var  i  =  10000;        while(i-­‐...
with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s ...
with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s ...
with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s ...
with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s ...
with(obj){  p  } obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s ...
var  a  =  0; function(){    try{        a  +=  1;    }  catch(e)  {} } function(){    a  +=  1; }
try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
try/catch no  try/catch 0.006s 0.005s 0.287s 0.011s 0.460s 0.460s 0.123s 0.012s
no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 ...
no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 ...
no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 ...
no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 ...
no try/catch try/catch Firefox 3.5 Safari 4.0 Chrome 3 IE 8 0 0,1 0,2 0,3 ...
Modern JavaScript engines have JIT compilers, which don’t support certain features well
Avoid stuff that’s not available in ECMA-262 5th Edition “strict” mode, see John’s blog post
Avoid stuff that’s not available in ECMA-262 5th Edition “strict” mode, see John’s blog post http://...
alert((function(){return"alert (("+arguments.callee.toString() .replace(/s/g,"")+")());";})());
alert((function(){return"alert (("+arguments.callee.toString() .replace(/s/g,"")+")());";})());
(function(){  return  2  *  3;  }).toString();
function  ()  {  return  2  *  3;  }
function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  }
function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  }
function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } funct...
function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } funct...
More in http://jsrocks.com
More in http://jsrocks.com
DO NOT, EVER, OPTIMIZE PREMATURELY
Q&A And thanks! http://javascriptrocks.com/ @thomasfuchs on twitter
Extreme JavaScript Performance
Extreme JavaScript Performance
Extreme JavaScript Performance
Extreme JavaScript Performance
Extreme JavaScript Performance
Extreme JavaScript Performance
Upcoming SlideShare
Loading in …5
×

Extreme JavaScript Performance

100,571 views

Published on

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

Published in: Technology
15 Comments
293 Likes
Statistics
Notes
no profile picture user
Show More
Show More
No Downloads
Views
Total views
100,571
On SlideShare
0
From Embeds
0
Number of Embeds
10,698
Actions
Shares
0
Downloads
1,635
Comments
15
Likes
293
Embeds 0
No embeds

No notes for slide

Extreme JavaScript Performance

  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

×