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.

jQuery Performance

435 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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

×