Javascript Performance-Optimierung

Johannes Weber TM09

Agenda

• Was beeinflusst die Performance-Optimierung?

• Lookups einsparen

• Loop optimierung

• Event delegation

• Performance Tipps

Was beeinflusst die Performance-

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

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 (Nativ)

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

Lookups einsparen (jQuery)

Loop Optimierung

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 1

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 2

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

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

}

Loop-Optimierung 3

Event Delegation

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

Performance Tipps

#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

Q & A