More Related Content More from Patrick Sheridan More from Patrick Sheridan (14) Javascript Performance Tricks3. 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
10. Loops
for loop while loop
900,000
675,000
450,000
225,000
0
Chrome 21 Firefox 12 IE9
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
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
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
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
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
Editor's Notes About me - MC, Ext JS in Action SE, History, SDC, Sencha \n \n Hard to debug, slow, ... But sometimes necessary (JSON)\nMobile, JSON Decode\n54x faster\nops/sec benchmark.js (jsperf style)\n Dynamic array creation can be slow\n \n \n \n \n a=1 for minimal noise during benchmarks\n \n Straight forward, but let’s examine the impact\n \n \n 2000%\n\n 2000%\n\n \n Bubbling - delegation\nCommon for Ext JS / Sencha Touch DataView/List items\n Bubbling - delegation\nCommon for Ext JS / Sencha Touch DataView/List items\n Fight the unresponsive dialogue\nVisually speed up long tasks (esp with dom manipulation)\n \n \n \n \n \n \n \n \n CSS class selectors are the slowest, ID are the fastest\n \n