Javascript Performance Tweaks

Javascript Performance Tweaks
Geht da noch was?

1

1

Sascha Hameister

- Lebt in Berlin
- Entwickler, App Aware
- über 10 Jahre Entwicklungserfahrung
- Speaker auf Fachkonferenzen
- Autor bei O‘Reilly und Hanser-Verlag
- Fokus: Mobile, Web

2

2

Philipp Grüner

- Lebt in München/Berlin
- Entwickler, App Aware
- über 8 Jahre Entwicklungserfahrung
- Speaker auf Fachkonferenzen
- Fokus: SAP, Web

3

3

App Aware

- Softwareagentur für
- Web Development
- Mobile Development
- SAP Business Development
- Gründung im Mai 2008

4

4

Agenda

- Was beein usst die Performance-Optimierung?
- Lookups einsparen
- Loop Optimierung
- Event Delegation
- Anonyme Funktionen
- new ...() vs. [], {}, ''

5

5

Was beein usst die Performance-
Optimierung?

6

6

Was beein usst die Performance-
Optimierung?
- Performance-Optimierungen sind stets fallspezi sch
- MacBook Pro
- Snow Leopard
- 2.5GHz Intel Core2 Duo
- 4GB RAM
-Firefox 3.5.5
- Firebug
- Für jede Optimierung sind Verbesserungen im
Millisekundenbereich möglich

7

7

Performance um jeden Preis?

- Performance vs.
- Lesbarkeit
- Datenintegrität
- Wartbarkeit
- Wiederverwendbarkeit
- Entwicklungsgeschwindigkeit

8

8

Lookups einsparen

9

9

Lookups einsparen (Nativ)

document.getElementById('example').innerHTML = 'HTML INHALT';

document.getElementById('example').style.color = '#123456';

document.getElementById('example').style.height = '20px';

var exampleElement = document.getElementById('example');

exampleElement.style.height = '20px';

exampleElement.style.color = '#123456';

exampleElement.innerHTML = 'HTML INHALT';

10

10

Lookups einsparen (Nativ)
Nach der Optimierung
Vor der Optimierung
90,0

67,5
Millisekunden

45,0

22,5

0
1 100 500 1.000
11
Anzahl der Aufrufe
11

Lookups einsparen
(jQuery-Framework)

$('.example').css('height', '20px');

$('.example').css('color', '#123456');

$('.example').html('HTML INHALT');

var $exampleElement = $('.example');

$exampleElement.css({
'color': '#123456',
'height': '20px'
})

$exampleElement.html('HTML INHALT');
12

12

Lookups einsparen (Framework)
Nach der Optimierung
Vor der Optimierung
500,0

375,0
Millisekunden

250,0

125,0

0
1 100 500 1.000
13
Anzahl der Aufrufe
13

Loop Optimierung

14

14

Loop-Optimierung 1

var anArray = ['Foo', 'Bar', 'Moo', 'Cow'];

for (var i = 0; i < anArray.length; i++) {
var currentElement = anArray[i];
}

var anArrayLength = anArray.length;

for (var i = 0; i < anArrayLength; i++) {
}

15

15

Loop-Optimierung 1
Optimierung 1 Vor der Optimierung

4000,0

3000,0
Mikrosekunden

2000,0

1000,0

0
1 100 500 1.000
16
Anzahl der Aufrufe
16

Loop-Optimierung 2


}


var currentElement;
currentElement = anArray[i];
}

17

17

Loop-Optimierung 2
Optimierung 2 Optimierung 1

4000,0

3000,0
Mikrosekunden

2000,0

1000,0

0
1 100 500 1.000
18
Anzahl der Aufrufe
18

Loop-Optimierung 3


var currentElement;
}


var currentElement;
for (var i = 0; i < anArrayLength; ++i) {
}

19

19

Post- und Pre-Inkrementierung

// Post-Inkrementierung
var i = 1;

var z = i++; // z = 1, i = 2

// Pre-Inkrementierung
var i = 1;

var z = ++i; // z = 2, i = 2

20

20

Loop-Optimierung 3


var currentElement;
}


var currentElement;
for (var i = 0; i < anArrayLength; ++i) {
}

21

21

Loop-Optimierung 3

4000,0

3000,0
Mikrosekunden

2000,0

1000,0

0
1 100 500 1.000
22
Anzahl der Aufrufe
22

Loop-Optimierung Gesamt
4000,0

3000,0
Mikrosekunden

2000,0

1000,0

0
1 100 500 1.000
23
Anzahl der Aufrufe
23

Event Delegation

24

24

Event Delegation

- Binden von Events an Elternelemente der konkreten Event-Ziele
- Einsatzgebiet: Tabellarische Darstellungen wie Excel, Kalender, ...

<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
...
</ul>

25

25

Event Delegation

$('li').bind('click', function (event) {
! var $this = $(this);
! $('div').html($this.html());
});

$('ul').bind('click', function (event) {
! var $target = $(event.originalTarget);
! $('div').html($target.html());
});

26

26

Event Delegation (Bindingdauer)

600000,0

450000,0
Mikrosekunden

300000,0

150000,0

0
1 100 500 1.000
27
Anzahl der Aufrufe
27

Anonyme Funktionen
sind böse!

28

28

Anonyme Funktionen

(function () {
for (var i = 0; i < 1000; i++) {}
})();

function foo () {
for (var i = 0; i < 1000; i++) {}
};

foo();

30

30

Anonyme Funktionen
Optimierung Vor der Optimierung

50000,0

37500,0
Mikrosekunden

25000,0

12500,0

0
1 100 500 1.000
31
Anzahl der Aufrufe
31

new ...() vs. [], {}, ''

32

32

new...() vs. [], {}, ''

var foo = {};

var foo = new Object();

33

33

new Object() vs. {}
{} new Object()

3000,0

2250,0
Mikrosekunden

1500,0

750,0

0
1 100 500 1.000
34
Anzahl der Aufrufe
34

new...() vs. [], {}, ''

var foo = [];

var foo = new Array();

35

35

new Array() vs. []
[] new Array()

3000,0

2250,0
Mikrosekunden

1500,0

750,0

0
1 100 500 1.000
36
Anzahl der Aufrufe
36

new...() vs. [], {}, ''

var foo = '';

var foo = new String('');

37

37

new String() vs. ''
'' new String()

4000,0

3000,0
Mikrosekunden

2000,0

1000,0

0
1 100 500 1.000
38
Anzahl der Aufrufe
38

new...() vs. [], {}, ''

var foo = true;

var foo = new Boolean(true);

39

39

new Boolean(true) vs. true
true new Boolean(true)

4000,0

3000,0
Mikrosekunden

2000,0

1000,0

0
1 100 500 1.000
40
Anzahl der Aufrufe
40

Achtung! Achtung!

41

41

Achtung! Achtung!

var foo = new String();

alert(typeof foo); // => 'object'
alert(foo instanceof String); // => true

var bar = '';

alert(typeof bar); // => 'string'
alert(bar instanceof String); // => false

- Array, Object, Boolean und RegExp weisen dasselbe Verhalten
42

42

Javascript Performance Tweaks
Da ging noch was!
Vielen Dank! :-)

43

43

Javascript Performance Tweaks

Weitere ähnliche Inhalte

Empfohlen (20)

Javascript Performance Tweaks