Javascript Performance Tweaks

Download Javascript Performance Tweaks

Post on 20-Jan-2015

1.200 views

Category:

Education

1 download

Embed Size (px)

DESCRIPTION

Prsentation zum Thema "Javascript Performance Tweaks", gehalten von Entwicklern der Softwareagentur App Aware: Sascha Hameister und Philipp Grner

TRANSCRIPT

  • 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 OReilly und Hanser-Verlag - Fokus: Mobile, Web 22 3. Philipp Grner- Lebt in Mnchen/Berlin - Entwickler, App Aware - ber 8 Jahre Entwicklungserfahrung - Speaker auf Fachkonferenzen - Fokus: SAP, Web33 4. App Aware- Softwareagentur fr- Web Development- Mobile Development- SAP Business Development - Grndung 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 - Fr jede Optimierung sind Verbesserungen im Millisekundenbereich mglich 77 8. Performance um jeden Preis?- Performance vs. - Lesbarkeit - Datenintegritt - Wartbarkeit - Wiederverwendbarkeit - Entwicklungsgeschwindigkeit8 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 OptimierungVor der Optimierung 90,0 67,5 Millisekunden 45,0 22,5 01100 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,00 1100 500 1.00013Anzahl der Aufrufe13 14. Loop Optimierung14 14 15. Loop-Optimierung 1var 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]; } 1515 16. Loop-Optimierung 1Optimierung 1 Vor der Optimierung4000,0 3000,0 Mikrosekunden 2000,0 1000,0 01100 5001.00016 Anzahl der Aufrufe16 17. Loop-Optimierung 2var 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]; }1717 18. Loop-Optimierung 2Optimierung 2 Optimierung 14000,0 3000,0 Mikrosekunden 2000,0 1000,0 01100 5001.00018 Anzahl der Aufrufe18 19. Loop-Optimierung 3var 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]; }1919 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 = 220 20 21. Loop-Optimierung 3var 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]; }2121 22. Loop-Optimierung 3Optimierung 3 Optimierung 24000,0 3000,0 Mikrosekunden 2000,0 1000,0 01100 5001.00022 Anzahl der Aufrufe22 23. Loop-Optimierung GesamtOptimierung 3 Optimierung 2Optimierung 1 Vor der Optimierung 4000,0 3000,0 Mikrosekunden 2000,0 1000,0 01100 5001.00023 Anzahl der Aufrufe23 24. Event Delegation24 24 25. Event Delegation- Binden von Events an Elternelemente der konkreten Event-Ziele - Einsatzgebiet: Tabellarische Darstellungen wie Excel, Kalender, ...

  • Element 1
  • Element 2
  • Element 3 ...

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 Optimierung600000,0 450000,0 Mikrosekunden 300000,0 150000,0 01100 5001.00027 Anzahl der Aufrufe27 28. Anonyme Funktionen sind bse!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 Optimierung50000,0 37500,0 Mikrosekunden 25000,0 12500,00 1100500 1.000 31 Anzahl der Aufrufe 31 32. new ...() vs. [], {}, ''32 32 33. new...() vs. [], {}, '' var foo = {}; var foo = new Object(); 3333 34. new Object() vs. {}{}new Object()3000,0 2250,0 Mikrosekunden 1500,0750,0 011005001.000 34Anzahl der Aufrufe 34 35. new...() vs. [], {}, '' var foo = []; var foo = new Array(); 3535 36. new Array() vs. [][]new Array()3000,0 2250,0 Mikrosekunden 1500,0750,0 01100 5001.00036 Anzahl der Aufrufe36 37. new...() vs. [], {}, '' var foo = ''; var foo = new String(''); 3737 38. new String() vs. ''''new String()4000,0 3000,0 Mikrosekunden 2000,0 1000,0 011005001.000 38Anzahl der Aufrufe 38 39. new...() vs. [], {}, '' var foo = true; var foo = new Boolean(true); 3939 40. new Boolean(true) vs. truetrue new Boolean(true)4000,0 3000,0 Mikrosekunden 2000,0 1000,0 011005001.000 40Anzahl der Aufrufe 40 41. Achtung! Achtung! 4141 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