2. Javascript Performance -Optimierung -Optimierung Johannes Weber TM09

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

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

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

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

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

32. Q & A