2. Javascript Performance -Optimierung -Optimierung Johannes Weber TM09

3. Agenda Was beeinflusst die Performance-Optimierung? Lookups einsparen Loop optimierung Event delegation Performance Tipps

4. Was beeinflusst die Performance- Optimierung? Optimierung? Performance-Optimierungen sind stets fallspezifisch MacBook Pro Leopard 2.5GHz Intel Core2 Duo 2GB RAM Firefox 3.5.5 Firebug Für jede Optimierung sind Verbesserungen im Millisekundenbereich möglich

5. Performance um jeden Preis? Performance vs. Lesbarkeit Datenintegrität Wartbarkeit Wiederverwendbarkeit Entwicklungsgeschwindigkeit

6. Lookups einsparen

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';

8. Lookups einsparen (Nativ)

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');

10. Lookups einsparen (jQuery)

11. Loop Optimierung

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]; }

13. Loop-Optimierung 1

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]; }

15. Loop-Optimierung 2

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]; }

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

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]; }

19. Loop-Optimierung 3

20. Event Delegation

21. 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>

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()); });

23. Event Delegation Bindungsdauer

24. Performance Tipps

25. #id vs .class CSS 1 - 3 Selektoren - Sizzle CSS Selector Engine verlockend durch kurze Schreibweise $('#id') -> document.getElementById() $('.class') -> durchsuchen jedes DOM Elementes

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;);

27. #id vs .class nur soviele Suchinformationen wie nötig! Beispiel: Formular validierung

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;); });

29. Selectoren Cachen $() -> jQuery Object 1 Aufruf -> kein caching > 1 Aufrufe -> caching! Beispiel: Formular validierung

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(); });

31. Tipps & Tricks Google Page Speed YSlow JS compressor Google closure-compiler

32. Q & A