Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript Performance Tweaks

1,493 views

Published on

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

Published in: Education, Technology, Business
  • Be the first to comment

Javascript Performance Tweaks

  1. 1. Javascript Performance Tweaks Geht da noch was? 1 1
  2. 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. 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. 4. App Aware - Softwareagentur für - Web Development - Mobile Development - SAP Business Development - Gründung im Mai 2008 4 4
  5. 5. Agenda - Was beein usst die Performance-Optimierung? - Lookups einsparen - Loop Optimierung - Event Delegation - Anonyme Funktionen - new ...() vs. [], {}, '' 5 5
  6. 6. Was beein usst die Performance- Optimierung? 6 6
  7. 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. 8. Performance um jeden Preis? - Performance vs. - Lesbarkeit - Datenintegrität - Wartbarkeit - Wiederverwendbarkeit - Entwicklungsgeschwindigkeit 8 8
  9. 9. Lookups einsparen 9 9
  10. 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. 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. 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. 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. 14. Loop Optimierung 14 14
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. Event Delegation 24 24
  25. 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. 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. 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. 28. Anonyme Funktionen sind böse! 28 28
  29. 29. 29
  30. 30. Anonyme Funktionen (function () { for (var i = 0; i < 1000; i++) {} })(); function foo () { for (var i = 0; i < 1000; i++) {} }; foo(); 30 30
  31. 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. 32. new ...() vs. [], {}, '' 32 32
  33. 33. new...() vs. [], {}, '' var foo = {}; var foo = new Object(); 33 33
  34. 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. 35. new...() vs. [], {}, '' var foo = []; var foo = new Array(); 35 35
  36. 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. 37. new...() vs. [], {}, '' var foo = ''; var foo = new String(''); 37 37
  38. 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. 39. new...() vs. [], {}, '' var foo = true; var foo = new Boolean(true); 39 39
  40. 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. 41. Achtung! Achtung! 41 41
  42. 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. 43. Javascript Performance Tweaks Da ging noch was! Vielen Dank! :-) 43 43

×