Javascript Performance Tweaks

1,456 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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,456
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×