jQuery Performance

339 views
296 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
339
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Performance

  1. 2. Javascript Performance -Optimierung -Optimierung Johannes Weber TM09
  2. 3. Agenda <ul><li>Was beeinflusst die Performance-Optimierung? </li></ul><ul><li>Lookups einsparen </li></ul><ul><li>Loop optimierung </li></ul><ul><li>Event delegation </li></ul><ul><li>Performance Tipps </li></ul>
  3. 4. Was beeinflusst die Performance- Optimierung? Optimierung? <ul><li>Performance-Optimierungen sind stets fallspezifisch </li></ul><ul><ul><li>MacBook Pro </li></ul></ul><ul><ul><ul><li>Leopard </li></ul></ul></ul><ul><ul><ul><li>2.5GHz Intel Core2 Duo </li></ul></ul></ul><ul><ul><ul><li>2GB RAM </li></ul></ul></ul><ul><ul><li>Firefox 3.5.5 </li></ul></ul><ul><ul><li>Firebug </li></ul></ul><ul><li>Für jede Optimierung sind Verbesserungen im Millisekundenbereich möglich </li></ul>
  4. 5. Performance um jeden Preis? <ul><li>Performance vs. </li></ul><ul><ul><li>Lesbarkeit </li></ul></ul><ul><ul><li>Datenintegrität </li></ul></ul><ul><ul><li>Wartbarkeit </li></ul></ul><ul><ul><li>Wiederverwendbarkeit </li></ul></ul><ul><ul><li>Entwicklungsgeschwindigkeit </li></ul></ul>
  5. 6. Lookups einsparen
  6. 7. 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';
  7. 8. Lookups einsparen (Nativ)
  8. 9. Lookups einsparen (jQuery) $('.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');
  9. 10. Lookups einsparen (jQuery)
  10. 11. Loop Optimierung
  11. 12. 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]; }
  12. 13. Loop-Optimierung 1
  13. 14. 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]; }
  14. 15. Loop-Optimierung 2
  15. 16. 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]; }
  16. 17. 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
  17. 18. 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]; }
  18. 19. Loop-Optimierung 3
  19. 20. Event Delegation
  20. 21. Event Delegation <ul><li>Binden von Events an Elternelemente der konkreten Event-Ziele </li></ul><ul><li>Einsatzgebiet: Tabellarische Darstellungen wie Excel, Kalender, ... </li></ul><ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> ... </ul>
  21. 22. 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()); });
  22. 23. Event Delegation Bindungsdauer
  23. 24. Performance Tipps
  24. 25. #id vs .class <ul><li>CSS 1 - 3 Selektoren - Sizzle CSS Selector Engine </li></ul><ul><li>verlockend durch kurze Schreibweise </li></ul><ul><li>$('#id') -> document.getElementById() </li></ul><ul><li>$('.class') -> durchsuchen jedes DOM Elementes </li></ul>
  25. 26. #id vs .class var d = new Date();console.info(&quot;Class Test:&quot;);console.info(&quot;-- Start: &quot; + d.getSeconds() + &quot; &quot; + d.getMilliseconds());var testBody = &quot;&quot;;for (var i=0; i<1000; i++){ testBody += &quot;<div class='testable&quot;+i+&quot;'>&quot;;}$(&quot;body&quot;).append(testBody);for (var i=0; i<1000; i++){ $(&quot;.testable&quot;+i);}// ----------------------------------var d = new Date();console.info(&quot;-- End: &quot; + d.getSeconds() + &quot; &quot; + d.getMilliseconds());console.info(&quot;-- ID Test&quot;);console.info(&quot;-- Start: &quot; + d.getSeconds() + &quot; &quot; + d.getMilliseconds());testBody = &quot;&quot;;for (var i=0; i<1000; i++){ testBody += &quot;<div id='testable&quot;+i+&quot;'>&quot;;}$(&quot;body&quot;).append(testBody);for (var i=0; i<1000; i++){ $(&quot;#testable&quot;+i);}var d = new Date();console.info(&quot;-- End: &quot; + d.getSeconds() + &quot; &quot; + d.getMilliseconds());console.info(&quot;End Test&quot;);
  26. 27. #id vs .class <ul><li>nur soviele Suchinformationen wie nötig! </li></ul><ul><li>Beispiel: Formular validierung </li></ul>
  27. 28. #id vs .class // 50 INPUT Elemente müssen vor Absenden des Formulares validiert werden // <input type=text class=&quot;notBlank&quot;> // der „ schlechte “ Weg $(&quot; .notBlank &quot;).each(function(){ if ($(this).val()==&quot;&quot;) $(this).addClass(&quot;error&quot;); }); // der „ gute “ Weg $(&quot; input.notBlank &quot;).each(function(){ if ($(this).val()==&quot;&quot;) $(this).addClass(&quot;error&quot;); }); // der „ beste “ weg $(&quot; input:text.notBlank &quot;).each(function(){ if ($(this).val()==&quot;&quot;) $(this).addClass(&quot;error&quot;); });
  28. 29. Selectoren Cachen <ul><li>$() -> jQuery Object </li></ul><ul><li>1 Aufruf -> kein caching </li></ul><ul><li>> 1 Aufrufe -> caching! </li></ul><ul><li>Beispiel: Formular validierung </li></ul>
  29. 30. #id vs .class $(&quot;#ourHideButton&quot;).click(function(){ $(&quot;.hideable&quot;).hide(); }); var hideable ; $(&quot;#ourHideButton&quot;).click(function(){ if ( hideable ) hideable .hide(); else hideable = $(&quot;.hideable&quot;).hide(); });
  30. 31. Tipps & Tricks <ul><li>Google Page Speed </li></ul><ul><li>YSlow </li></ul><ul><li>JS compressor </li></ul><ul><li>Google closure-compiler </li></ul>
  31. 32. Q & A

×