1. JavaScript
Performance Tricks
Grgur Grisogono - @ggrgur

2. Evaluation
eval(foo)
vs
(new Function(foo))()

3. Evaluation
eval(foo)
(new Function(foo))()
6,000
5,256
4,500
3,000
1,500 1,081
97 79 110 160 42 47
0
Chrome 21 Firefox 12 IE8 IE7

4. String Concatenation
foo = foo + bar
foo += bar
[].join(’’)
20,000,000 18,817,419
15,000,000
9,940,504
10,000,000
6,348,293
5,000,000 4,503,838 4,191,713
1,359,961
825,543
435,988 347,348 443,218
0
Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1

5. String Concatenation
foo = foo + bar
foo += bar
[].join(’’)
foo.concat(bar)
93,236,430
56,781,122
18,817,419 21,484,919
4,503,838 5,878,675
1,320,424
347,348 1,493,283 443,218
Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1

6. String Concatenation
foo = foo + bar
foo += bar
[].join(’’)
foo.concat(bar)
93,236,430
56,781,122
21,484,919
9,940,504
6,348,293 4,191,713 5,878,675
435,988 1,320,424 1,359,961
Chrome 21 Firefox 12 IE9 Safari 5 iOS Safari 5.1.1

7. String Concatenation

8. String Concatenation

9. Loops

10. Loops
for loop while loop
900,000
675,000
450,000
225,000
0
Chrome 21 Firefox 12 IE9

11. Nested Object
Properties

12. Nested Object
Properties
deep shallow
60,000,000
45,000,000
30,000,000
15,000,000
0
Chrome 21 Firefox 12 Desktop Safari 5

13. Reuse Array Refs
foo = [1]
foo.length = 0; foo.push(1)
300,000,000
221,911,826
225,000,000
150,000,000
75,000,000
10,688,860 10,964,912 18,867,925
1,311,286 1,670,314
0
Chrome 21 Firefox 12 IE9

14. Reuse Array Refs
foo = [1]
foo.length = 0; foo.push(1)
18,867,925 1,670,314
1,311,286
221,911,826
10,964,912
10,688,860
Chrome 21 Firefox 12 IE9

15. Reuse Array Refs
foo = [1]
foo.length = 0; foo.push(1)
49,678,120
2,493,830
1,030,567
14,644,518
Desktop Safari 5 Mobile Safari iPhone 4S 5.1.1

16. Overusing Closures

17. Minimize Number of
Events

18. Minimize Number of
Events

19. Timers
0
10 ms timer #1 started
Time in ms
Screen resized
10 Main JS code execution
Timer #1 has expired
20
Screen resize event handler 10 ms timer #2 started
30
Timer #1 handler Timer #2 has expired
40 Timer #2 handler 10ms timer #3 started
50
Timer #3 handler

20. Adding Elements To
DOM

21. Adding Elements To
DOM

22. Adding Elements To
DOM

23. Adding Elements To
DOM

24. Adding Elements To
DOM
innerHTML DOM methods/replaceChild
DOM/cloneNode DocumentFragment
15,000
11,250
7,500
3,750
0
Chrome 21 Firefox 12 IE8 Safari Opera Mobile Safari

25. Updating CSS Styles

26. Updating CSS Styles
style cssText
70,000
52,500
35,000 69,621
62,893
58,388
40,058
17,500
0
Chrome 21 Firefox 12

27. Selectors

28. Selectors
table #menu .first
li.first #menu .first #menu > li.first
div#div1 table #menu li.first
1,500,000
1,125,000
750,000
375,000
0
Chrome 21 Desktop Safari 5 Firefox 12 IE9

29. Questions?