javascript performance tweaks

43
1 Javascript Performance Tweaks Geht da noch was? 1

Upload: sascha-hameister

Post on 20-Jan-2015

1.248 views

Category:

Education


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Javascript Performance Tweaks

1

Javascript Performance TweaksGeht da noch was?

1

Page 2: Javascript Performance Tweaks

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

Page 3: Javascript Performance Tweaks

3

Philipp Grüner

- Lebt in München/Berlin

- Entwickler, App Aware

- über 8 Jahre Entwicklungserfahrung

- Speaker auf Fachkonferenzen

- Fokus: SAP, Web

3

Page 4: Javascript Performance Tweaks

4

App Aware

- Softwareagentur für

- Web Development

- Mobile Development

- SAP Business Development

- Gründung im Mai 2008

4

Page 5: Javascript Performance Tweaks

5

Agenda

- Was beein!usst die Performance-Optimierung?

- Lookups einsparen

- Loop Optimierung

- Event Delegation

- Anonyme Funktionen

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

5

Page 6: Javascript Performance Tweaks

6

Was beein!usst die Performance-Optimierung?

6

Page 7: Javascript Performance Tweaks

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

Page 8: Javascript Performance Tweaks

8

Performance um jeden Preis?

- Performance vs.

- Lesbarkeit

- Datenintegrität

- Wartbarkeit

- Wiederverwendbarkeit

- Entwicklungsgeschwindigkeit

8

Page 9: Javascript Performance Tweaks

9

Lookups einsparen

9

Page 10: Javascript Performance Tweaks

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

Page 11: Javascript Performance Tweaks

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

Page 12: Javascript Performance Tweaks

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

Page 13: Javascript Performance Tweaks

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

Page 14: Javascript Performance Tweaks

14

Loop Optimierung

14

Page 15: Javascript Performance Tweaks

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

Page 16: Javascript Performance Tweaks

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

Page 17: Javascript Performance Tweaks

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

Page 18: Javascript Performance Tweaks

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

Page 19: Javascript Performance Tweaks

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

Page 20: Javascript Performance Tweaks

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

Page 21: Javascript Performance Tweaks

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

Page 22: Javascript Performance Tweaks

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

Page 23: Javascript Performance Tweaks

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

Page 24: Javascript Performance Tweaks

24

Event Delegation

24

Page 25: Javascript Performance Tweaks

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

Page 26: Javascript Performance Tweaks

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

Page 27: Javascript Performance Tweaks

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

Page 28: Javascript Performance Tweaks

28

Anonyme Funktionensind böse!

28

Page 29: Javascript Performance Tweaks

29

Page 30: Javascript Performance Tweaks

30

Anonyme Funktionen

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

})();

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

};

foo();

30

Page 31: Javascript Performance Tweaks

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

Page 32: Javascript Performance Tweaks

32

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

32

Page 33: Javascript Performance Tweaks

33

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

var foo = {};

var foo = new Object();

33

Page 34: Javascript Performance Tweaks

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

Page 35: Javascript Performance Tweaks

35

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

var foo = [];

var foo = new Array();

35

Page 36: Javascript Performance Tweaks

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

Page 37: Javascript Performance Tweaks

37

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

var foo = '';

var foo = new String('');

37

Page 38: Javascript Performance Tweaks

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

Page 39: Javascript Performance Tweaks

39

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

var foo = true;

var foo = new Boolean(true);

39

Page 40: Javascript Performance Tweaks

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

Page 41: Javascript Performance Tweaks

41

Achtung! Achtung!

41

Page 42: Javascript Performance Tweaks

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

Page 43: Javascript Performance Tweaks

43

Javascript Performance TweaksDa ging noch was!

Vielen Dank! :-)

43