1
Javascript Performance TweaksGeht da noch was?
1
Sascha Hameister
2
- Lebt in Berlin
- Entwickler, App Aware
- über 10 Jahre Entwicklungserfahrung
- Speaker auf Fachkonferenzen
- Autor bei O‘Reilly und Hanser-Verlag
- Fokus: Mobile, Web
2
3
Philipp Grüner
- Lebt in München/Berlin
- Entwickler, App Aware
- über 8 Jahre Entwicklungserfahrung
- Speaker auf Fachkonferenzen
- Fokus: SAP, Web
3
4
App Aware
- Softwareagentur für
- Web Development
- Mobile Development
- SAP Business Development
- Gründung im Mai 2008
4
5
Agenda
- Was beein!usst die Performance-Optimierung?
- Lookups einsparen
- Loop Optimierung
- Event Delegation
- Anonyme Funktionen
- new ...() vs. [], {}, ''
5
6
Was beein!usst die Performance-Optimierung?
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
8
Performance um jeden Preis?
- Performance vs.
- Lesbarkeit
- Datenintegrität
- Wartbarkeit
- Wiederverwendbarkeit
- Entwicklungsgeschwindigkeit
8
9
Lookups einsparen
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
11
Lookups einsparen (Nativ)
0
22,5
45,0
67,5
90,0
1 100 500 1.000
Mill
isek
unde
n
Anzahl der Aufrufe
Nach der OptimierungVor der Optimierung
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
13
Lookups einsparen (Framework)
0
125,0
250,0
375,0
500,0
1 100 500 1.000
Mill
isek
unde
n
Anzahl der Aufrufe
Nach der OptimierungVor der Optimierung
13
14
Loop Optimierung
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
16
Loop-Optimierung 1
0
1000,0
2000,0
3000,0
4000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
Optimierung 1 Vor der Optimierung
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
18
Loop-Optimierung 2
0
1000,0
2000,0
3000,0
4000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
Optimierung 2 Optimierung 1
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
20
Post- und Pre-Inkrementierung
// Post-Inkrementierungvar i = 1;
var z = i++; // z = 1, i = 2
// Pre-Inkrementierungvar i = 1;
var z = ++i; // z = 2, i = 2
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
22
Loop-Optimierung 3
0
1000,0
2000,0
3000,0
4000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
Optimierung 3 Optimierung 2
22
23
Loop-Optimierung Gesamt
0
1000,0
2000,0
3000,0
4000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
Optimierung 3 Optimierung 2Optimierung 1 Vor der Optimierung
23
24
Event Delegation
24
25
Event Delegation
<ul><li>Element 1</li><li>Element 2</li><li>Element 3</li>...
</ul>
- Binden von Events an Elternelemente der konkreten Event-Ziele
- Einsatzgebiet: Tabellarische Darstellungen wie Excel, Kalender, ...
25
26
Event Delegation
$('ul').bind('click', function (event) {! var $target = $(event.originalTarget);! $('div').html($target.html());});
$('li').bind('click', function (event) {! var $this = $(this);! $('div').html($this.html());});
26
27
Event Delegation (Bindingdauer)
0
150000,0
300000,0
450000,0
600000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
Optimierung 1 Vor der Optimierung
27
28
Anonyme Funktionensind böse!
28
29
30
Anonyme Funktionen
(function () {for (var i = 0; i < 1000; i++) {}
})();
function foo () {for (var i = 0; i < 1000; i++) {}
};
foo();
30
31
Anonyme Funktionen
0
12500,0
25000,0
37500,0
50000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
Optimierung Vor der Optimierung
31
32
new ...() vs. [], {}, ''
32
33
new...() vs. [], {}, ''
var foo = {};
var foo = new Object();
33
34
new Object() vs. {}
0
750,0
1500,0
2250,0
3000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
{} new Object()
34
35
new...() vs. [], {}, ''
var foo = [];
var foo = new Array();
35
36
new Array() vs. []
0
750,0
1500,0
2250,0
3000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
[] new Array()
36
37
new...() vs. [], {}, ''
var foo = '';
var foo = new String('');
37
38
new String() vs. ''
0
1000,0
2000,0
3000,0
4000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
'' new String()
38
39
new...() vs. [], {}, ''
var foo = true;
var foo = new Boolean(true);
39
40
new Boolean(true) vs. true
0
1000,0
2000,0
3000,0
4000,0
1 100 500 1.000
Mik
rose
kund
en
Anzahl der Aufrufe
true new Boolean(true)
40
41
Achtung! Achtung!
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
43
Javascript Performance TweaksDa ging noch was!
Vielen Dank! :-)
43
Top Related