jQuery Performance

Javascript Performance -Optimierung -Optimierung Johannes Weber TM09

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

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

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

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

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

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

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

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

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

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>

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

Event Delegation Bindungsdauer

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

#id vs .class var d = new Date();console.info("Class Test:");console.info("-- Start: " + d.getSeconds() + " " + d.getMilliseconds());var testBody = "";for (var i=0; i<1000; i++){ testBody += "<div class='testable"+i+"'>";}$("body").append(testBody);for (var i=0; i<1000; i++){ $(".testable"+i);}// ----------------------------------var d = new Date();console.info("-- End: " + d.getSeconds() + " " + d.getMilliseconds());console.info("-- ID Test");console.info("-- Start: " + d.getSeconds() + " " + d.getMilliseconds());testBody = "";for (var i=0; i<1000; i++){ testBody += "<div id='testable"+i+"'>";}$("body").append(testBody);for (var i=0; i<1000; i++){ $("#testable"+i);}var d = new Date();console.info("-- End: " + d.getSeconds() + " " + d.getMilliseconds());console.info("End Test");

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

#id vs .class // 50 INPUT Elemente müssen vor Absenden des Formulares validiert werden // <input type=text class="notBlank"> // der „ schlechte “ Weg $(" .notBlank ").each(function(){ if ($(this).val()=="") $(this).addClass("error"); }); // der „ gute “ Weg $(" input.notBlank ").each(function(){ if ($(this).val()=="") $(this).addClass("error"); }); // der „ beste “ weg $(" input:text.notBlank ").each(function(){ if ($(this).val()=="") $(this).addClass("error"); });

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

#id vs .class $("#ourHideButton").click(function(){ $(".hideable").hide(); }); var hideable ; $("#ourHideButton").click(function(){ if ( hideable ) hideable .hide(); else hideable = $(".hideable").hide(); });

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

jQuery Performance

More Related Content

More from Johannes Weber (20)

jQuery Performance