Your SlideShare is downloading. ×
0
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Javascript Performance Tweaks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript Performance Tweaks

1,238

Published on

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

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,238
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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 O‘Reilly und Hanser-Verlag - Fokus: Mobile, Web 2 2
  • 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. App Aware - Softwareagentur für - Web Development - Mobile Development - SAP Business Development - Gründung 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 - Für jede Optimierung sind Verbesserungen im Millisekundenbereich möglich 7 7
  • 8. Performance um jeden Preis? - Performance vs. - Lesbarkeit - Datenintegrität - Wartbarkeit - Wiederverwendbarkeit - Entwicklungsgeschwindigkeit 8 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 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. 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,0 0 1 100 500 1.000 13 Anzahl der Aufrufe 13
  • 14. Loop Optimierung 14 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 15
  • 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. 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. 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. 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. 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. 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. 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. 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. Event Delegation 24 24
  • 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. 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 Optimierung 600000,0 450000,0 Mikrosekunden 300000,0 150000,0 0 1 100 500 1.000 27 Anzahl der Aufrufe 27
  • 28. Anonyme Funktionen sind böse! 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 Optimierung 50000,0 37500,0 Mikrosekunden 25000,0 12500,0 0 1 100 500 1.000 31 Anzahl der Aufrufe 31
  • 32. new ...() vs. [], {}, '' 32 32
  • 33. new...() vs. [], {}, '' var foo = {}; var foo = new Object(); 33 33
  • 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. new...() vs. [], {}, '' var foo = []; var foo = new Array(); 35 35
  • 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. new...() vs. [], {}, '' var foo = ''; var foo = new String(''); 37 37
  • 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. new...() vs. [], {}, '' var foo = true; var foo = new Boolean(true); 39 39
  • 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. Achtung! Achtung! 41 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 42
  • 43. Javascript Performance Tweaks Da ging noch was! Vielen Dank! :-) 43 43

×