Strategien für die Performance-Optimierung

Haben Sie erst einmal Potenzial in Sachen Performance erkannt, gibt es verschiedene Wege, Ihre Applikation zu optimieren. Die Umbauarbeiten beginnen in der Regel mit der schon angesprochenen Minimierung der DOM-Interaktionen. Während sich JavaScript-Code an sich gut optimieren lässt, bremsen DOM-Interaktionen Weboapplikationen immer wieder aus.

Wann immer Sie vom DOM Knoten empfangen, sollten Sie darüber nachdenken, ob sie diese nicht später wiederverwenden können. Legen Sie Knoten in einen Cache, von wo aus sie später zurückgeholt werden können. Schreiben Sie anstatt

function getElements() {

return $('.my-class'); }

besser

var cachedElements;

function getElements() {

if (cachedElements) {

return cachedElements;

cachedElements = $('.my-class');

return cachedElements; }

Genauso wie Sie DOM-Knoten in einem Cache ablegen können, machen Sie es auch mit den Werten von Attributen. Ein Beispiel für eine saubere HTML5/JavaScript-Lösung: Sie animieren ein Objekt durch Veränderung der Attributwerte des Knotens. Speichern Sie den letzten Wert jedes Bewegungsschritts, sodass Sie ihn nicht wiederholt auslesen müssen. Anstatt

setInterval(function() {

var ele = $('#Element');

var left = parseInt(ele.css('left'), 10);

ele.css('left', (left + 5) + 'px');

}, 1000 / 30);

schreiben Sie:

var ele = $('#Element');

var left = parseInt(ele.css('left'), 10);

setInterval(function() {

left += 5;

ele.css('left', left + 'px');

}, 1000 / 30);