jquery performance
DESCRIPTION
TRANSCRIPT
![Page 1: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/1.jpg)
![Page 2: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/2.jpg)
Javascript Performance-Optimierung
Johannes Weber TM09
![Page 3: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/3.jpg)
Agenda
• Was beeinflusst die Performance-Optimierung?
• Lookups einsparen
• Loop optimierung
• Event delegation
• Performance Tipps
![Page 4: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/4.jpg)
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
![Page 5: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/5.jpg)
Performance um jeden Preis?
• Performance vs.
• Lesbarkeit
• Datenintegrität
• Wartbarkeit
• Wiederverwendbarkeit
• Entwicklungsgeschwindigkeit
![Page 6: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/6.jpg)
Lookups einsparen
![Page 7: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/7.jpg)
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';
![Page 8: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/8.jpg)
Lookups einsparen (Nativ)
![Page 9: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/9.jpg)
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');
![Page 10: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/10.jpg)
Lookups einsparen (jQuery)
![Page 11: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/11.jpg)
Loop Optimierung
![Page 12: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/12.jpg)
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];
}
![Page 13: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/13.jpg)
Loop-Optimierung 1
![Page 14: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/14.jpg)
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];
}
![Page 15: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/15.jpg)
Loop-Optimierung 2
![Page 16: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/16.jpg)
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];
}
![Page 17: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/17.jpg)
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
![Page 18: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/18.jpg)
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];
}
![Page 19: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/19.jpg)
Loop-Optimierung 3
![Page 20: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/20.jpg)
Event Delegation
![Page 21: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/21.jpg)
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>
![Page 22: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/22.jpg)
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());
});
![Page 23: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/23.jpg)
Event Delegation Bindungsdauer
![Page 24: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/24.jpg)
Performance Tipps
![Page 25: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/25.jpg)
#id vs .class
• CSS 1 - 3 Selektoren - Sizzle CSS Selector Engine
• verlockend durch kurze Schreibweise
• $('#id') -> document.getElementById()
• $('.class') -> durchsuchen jedes DOM Elementes
![Page 26: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/26.jpg)
#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");
![Page 27: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/27.jpg)
#id vs .class
• nur soviele Suchinformationen wie nötig!
• Beispiel: Formular validierung
![Page 28: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/28.jpg)
#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");});
![Page 29: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/29.jpg)
Selectoren Cachen
• $() -> jQuery Object
• 1 Aufruf -> kein caching
• > 1 Aufrufe -> caching!
• Beispiel: Formular validierung
![Page 30: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/30.jpg)
#id vs .class
$("#ourHideButton").click(function(){ $(".hideable").hide();});
var hideable;
$("#ourHideButton").click(function(){ if (hideable) hideable.hide(); else hideable = $(".hideable").hide();});
![Page 31: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/31.jpg)
Tipps & Tricks
• Google Page Speed
• YSlow
• JS compressor
• Google closure-compiler
![Page 32: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/32.jpg)
Q & A
![Page 33: jQuery Performance](https://reader033.vdocument.in/reader033/viewer/2022061110/54540afcaf795907578b7d35/html5/thumbnails/33.jpg)