Upload
johannes-weber
View
333
Download
2
Embed Size (px)
DESCRIPTION
Citation preview
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