Präsentation zum Thema "Javascript Performance Tweaks", gehalten von Entwicklern der Softwareagentur App Aware: Sascha Hameister und Philipp Grüner

1. Javascript Performance Tweaks
Geht da noch was?
1
1

2. 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

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

4. App Aware
- Softwareagentur für
- Web Development
- Mobile Development
- SAP Business Development
- Gründung im Mai 2008
4
4

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

6. Was beein usst die Performance-
Optimierung?
6
6

7. 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

8. Performance um jeden Preis?
- Performance vs.
- Lesbarkeit
- Datenintegrität
- Wartbarkeit
- Wiederverwendbarkeit
- Entwicklungsgeschwindigkeit
8
8

9. Lookups einsparen
9
9

10. 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

11. 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

12. 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

13. 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

14. Loop Optimierung
14
14

15. Loop-Optimierung 1
var anArray = ['Foo', 'Bar', 'Moo', 'Cow'];
for (var i = 0; i < anArray.length; i++) {
var currentElement = anArray[i];
}
var anArray = ['Foo', 'Bar', 'Moo', 'Cow'];
var anArrayLength = anArray.length;
for (var i = 0; i < anArrayLength; i++) {
var currentElement = anArray[i];
}
15
15

16. 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

17. Loop-Optimierung 2
var anArray = ['Foo', 'Bar', 'Moo', 'Cow'];
var anArrayLength = anArray.length;
for (var i = 0; i < anArrayLength; i++) {
var currentElement = anArray[i];
}
var anArray = ['Foo', 'Bar', 'Moo', 'Cow'];
var anArrayLength = anArray.length;
var currentElement;
for (var i = 0; i < anArrayLength; i++) {
currentElement = anArray[i];
}
17
17

18. 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

19. Loop-Optimierung 3
var anArray = ['Foo', 'Bar', 'Moo', 'Cow'];
var anArrayLength = anArray.length;
var currentElement;
for (var i = 0; i < anArrayLength; i++) {
currentElement = anArray[i];
}
var anArray = ['Foo', 'Bar', 'Moo', 'Cow'];
var anArrayLength = anArray.length;
var currentElement;
for (var i = 0; i < anArrayLength; ++i) {
currentElement = anArray[i];
}
19
19

20. 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

21. Loop-Optimierung 3
var anArray = ['Foo', 'Bar', 'Moo', 'Cow'];
var anArrayLength = anArray.length;
var currentElement;
for (var i = 0; i < anArrayLength; i++) {
currentElement = anArray[i];
}
var anArray = ['Foo', 'Bar', 'Moo', 'Cow'];
var anArrayLength = anArray.length;
var currentElement;
for (var i = 0; i < anArrayLength; ++i) {
currentElement = anArray[i];
}
21
21

22. Loop-Optimierung 3
Optimierung 3 Optimierung 2
4000,0
3000,0
Mikrosekunden
2000,0
1000,0
0
1 100 500 1.000
22
Anzahl der Aufrufe
22

23. Loop-Optimierung Gesamt
Optimierung 3 Optimierung 2
Optimierung 1 Vor der Optimierung
4000,0
3000,0
Mikrosekunden
2000,0
1000,0
0
1 100 500 1.000
23
Anzahl der Aufrufe
23

24. Event Delegation
24
24

25. 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

26. 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

27. Event Delegation (Bindingdauer)
Optimierung 1 Vor der Optimierung
600000,0
450000,0
Mikrosekunden
300000,0
150000,0
0
1 100 500 1.000
27
Anzahl der Aufrufe
27

28. Anonyme Funktionen
sind böse!
28
28

29. 29

30. Anonyme Funktionen
(function () {
for (var i = 0; i < 1000; i++) {}
})();
function foo () {
for (var i = 0; i < 1000; i++) {}
};
foo();
30
30

31. 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

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

33. new...() vs. [], {}, ''
var foo = {};
var foo = new Object();
33
33

34. 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

35. new...() vs. [], {}, ''
var foo = [];
var foo = new Array();
35
35

36. 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

37. new...() vs. [], {}, ''
var foo = '';
var foo = new String('');
37
37

38. 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

39. new...() vs. [], {}, ''
var foo = true;
var foo = new Boolean(true);
39
39

40. 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

41. Achtung! Achtung!
41
41

42. 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

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