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

1. Extreme
JavaScript
Performance
Thomas Fuchs
@thomasfuchs

3. DO NOT, EVER,
OPTIMIZE
PREMATURELY

4. http://tr.im/extremejs

6. SpiderMonkey

7. SpiderMonkey
JavaScriptCore

8. SpiderMonkey
JavaScriptCore
JScript

9. SpiderMonkey
JavaScriptCore
JScript
V8

10. #1
avoid function calls

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. 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;
}

13. 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;
}

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. methodCall() inlinedMethod()
0.410s 0.150s
0.056s 0.045s
uhm, hmm† 0.128s
0.027s 0.016s

18. methodCall() inlinedMethod()
0.410s 0.150s
0.056s 0.045s
uhm, hmm† 0.128s
0.027s 0.016s

19. IE8 throws this warning
after 1 second

20. #2
embrace the
language

21. function literals(){
var a = [], o = {};
}
function classic(){
var a = new Array, o = new Object;
}

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. classic() literals()
0.291s 0.265s
0.020s 0.016s
0.220s 0.185s
0.024s 0.010s

26. classic() literals()
0.291s 0.265s
0.020s 0.016s
0.220s 0.185s
0.024s 0.010s

27. > parseInt(12.5);
12

28. > ~~(1 * "12.5")
12

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

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

34. parseInt() weird stuff
0.003s 0.002s
0.088s 0.081s
uhm, hmm† 0.547s
0.109s 0.282s

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

36. #3
loops

37. var test = '';
for (var i = 0;i<10000;i++)
test = test + str;
var test = '', i = 10000;
while(i-­‐-­‐) test = test + str;

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. for loop while loop
0.12s 0.12s
0.13s 0.13s
0.6s 0.6s
0.04s 0.04s

42. for loop while loop
0.12s 0.12s
0.13s 0.13s
0.6s 0.6s
0.04s 0.04s

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

44. function normalLoop(){
var i=60, j=0;
while(i-­‐-­‐) j++;
}

45. 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++;
}

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. normalLoop() unrolledLoop()
0.023s 0.010s
0.003s 0.001s
0.032s 0.015s
0.005s 0.001s

50. normalLoop() unrolledLoop()
0.023s 0.010s
0.003s 0.001s
0.032s 0.015s
0.005s 0.001s

51. #4
cache globals

52. function uncached(){
var i = 10000;
while(i-­‐-­‐) window.test = 'test';
}
function cached(){
var w = window, i = 10000;
while(i-­‐-­‐) w.test = 'test';
}

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

57. uncached cached
1.440s 0.825s
0.07s 0.07s
2.22s 2.19s
0.48s 0.16s

58. uncached cached
1.440s 0.825s
0.07s 0.07s
2.22s 2.19s
0.48s 0.16s
Safari is 20x faster
than Firefox

59. 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?

60. #5
expression tuning

61. var b = false, n = 99;
function(){
return n*n && b;
}
function(){
return b && n*n;
}

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

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 tuned tuned
0.005s 0.004s
0.011s 0.010s
0.906s 0.391s
0.037s 0.021s

67. not tuned tuned
0.005s 0.004s
0.011s 0.010s
0.906s 0.391s
0.037s 0.021s

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

69. #6
what not to use

70. 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;
}

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. with(obj){ p } obj.p
0.071s 0.012s
0.039s 0.028s
0.078s 0.078s
0.077s 0.006s

75. with(obj){ p } obj.p
0.071s 0.012s
0.039s 0.028s
0.078s 0.078s
0.077s 0.006s

76. var a = 0;
function(){
try{
a += 1;
} catch(e) {}
}
function(){
a += 1;
}

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. try/catch no try/catch
0.006s 0.005s
0.287s 0.011s
0.460s 0.460s
0.123s 0.012s

81. try/catch no try/catch
0.006s 0.005s
0.287s 0.011s
0.460s 0.460s
0.123s 0.012s

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

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

87. Modern JavaScript
engines have JIT
compilers, which don’t
support certain
features well

90. Avoid stuff
that’s not
available in
ECMA-262
5th Edition
“strict” mode,
see John’s blog
post

91. Avoid stuff
that’s not
available in
ECMA-262
5th Edition
“strict” mode,
see John’s blog
post
http://tr.im/ecma262

92. alert((function(){return"alert
(("+arguments.callee.toString()
.replace(/s/g,"")+")());";})());

93. alert((function(){return"alert
(("+arguments.callee.toString()
.replace(/s/g,"")+")());";})());

94. (function(){ return 2 * 3; }).toString();

96. function () { return 2 * 3; }

97. function () { return 2 * 3; }
function () { return 2 * 3; }

98. function () { return 2 * 3; }
function () { return 2 * 3; }
function () { return 2 * 3; }

99. function () { return 2 * 3; }
function () { return 2 * 3; }
function () { return 2 * 3; }
function () { return 6; }

100. function () { return 2 * 3; }
function () { return 2 * 3; }
function () { return 2 * 3; }
function () { return 6; } WTF?

101. More in
http://jsrocks.com

102. More in
http://jsrocks.com

104. DO NOT, EVER,
OPTIMIZE
PREMATURELY

105. Q&A
And thanks!
http://javascriptrocks.com/
@thomasfuchs on twitter