Download - Javascript Performance Tricks
JavaScript Performance Tricks
Grgur Grisogono - @ggrgur
Evaluation
eval(foo)
vs
(new Function(foo))()
Evaluation
0
1,500
3,000
4,500
6,000
Chrome 21 Firefox 12 IE8 IE7
47160
1,081
5,256
421107997
eval(foo)(new Function(foo))()
String Concatenation
0
5,000,000
10,000,000
15,000,000
20,000,000
Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1
443,218825,543347,348
4,503,838
18,817,419
1,359,961
4,191,713
435,988
6,348,293
9,940,504
foo = foo + barfoo += bar[].join(’’)
String Concatenation
Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1
5,878,675
93,236,430
1,320,424
21,484,919
56,781,122
443,2181,493,283347,3484,503,838
18,817,419
foo = foo + barfoo += bar[].join(’’)foo.concat(bar)
String Concatenation
Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1
5,878,675
93,236,430
1,320,424
21,484,919
56,781,122
1,359,9614,191,713435,988
6,348,2939,940,504
foo = foo + barfoo += bar[].join(’’)foo.concat(bar)
String Concatenation
String Concatenation
Loops
Loops
0
225,000
450,000
675,000
900,000
Chrome 21 Firefox 12 IE9
for loop while loop
Nested Object Properties
Nested Object Properties
0
15,000,000
30,000,000
45,000,000
60,000,000
Chrome 21 Firefox 12 Desktop Safari 5
deep shallow
Reuse Array Refs
0
75,000,000
150,000,000
225,000,000
300,000,000
Chrome 21 Firefox 12 IE9
1,670,31418,867,92510,688,860 1,311,286
10,964,912
221,911,826
foo = [1]foo.length = 0; foo.push(1)
Reuse Array Refs
Chrome 21
10,688,860
221,911,826
foo = [1]foo.length = 0; foo.push(1)
Firefox 12
18,867,925
10,964,912
IE9
1,670,314
1,311,286
Reuse Array Refs
Desktop Safari 5
49,678,120
14,644,518
foo = [1]foo.length = 0; foo.push(1)
Mobile Safari iPhone 4S 5.1.1
2,493,830
1,030,567
Overusing Closures
Minimize Number of Events
Minimize Number of Events
Timers0
10
20
40
50
30
Tim
e in
ms
Main JS code execution
10 ms timer #1 started
Screen resized
Timer #1 has expired
Screen resize event handler
Timer #1 handler
10 ms timer #2 started
Timer #2 has expired
Timer #2 handler
Timer #3 handler
10ms timer #3 started
Adding Elements To DOM
Adding Elements To DOM
Adding Elements To DOM
Adding Elements To DOM
Adding Elements To DOM
0
3,750
7,500
11,250
15,000
Chrome 21 Firefox 12 IE8 Safari Opera Mobile Safari
innerHTML DOM methods/replaceChildDOM/cloneNode DocumentFragment
Updating CSS Styles
Updating CSS Styles
0
17,500
35,000
52,500
70,000
Chrome 21 Firefox 12
69,62162,893
40,058
58,388
style cssText
Selectors
Selectors
0
375,000
750,000
1,125,000
1,500,000
Chrome 21 Desktop Safari 5 Firefox 12 IE9
table #menu .firstli.first #menu .first #menu > li.firstdiv#div1 table #menu li.first
Questions?
