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?