Mehr Speed: Optimierte Programmierung

1. Mehr Speed: Optimierte Programmierung
2. Optimierter Zugriff

© Internet Magazin

Trotz immer größerer Bandbreiten spielt der Ladevorgang immer noch eine zentrale Rolle - viele Anwender greifen inzwischen mit mobilen Endgeräten auf Webseiten zu. Diese haben meist schwächere Prozessoren, wodurch auch die Abarbeitung der Inhalte länger dauert. In diesem Workshop zeigen wir, wie Sie mit einigen grundsätzlichen Vorgehensweisen eine bessere Ausführungszeit des Codes erreichen.

Kennzeichnung lokaler Variablen

Achten Sie immer darauf, an welcher Stelle Sie Ihre Variablen benötigen und vermeiden Sie die Verwendung von globalen Deklarationen. Innerhalb einer Schleife - auch wenn es sich nur um den Zähler handelt, ist ansonsten jedes Mal ein Absprung auf das Coding außerhalb notwendig. Eine for-Schleife sollte deswegen im Hinblick auf den Zähler immer so aussehen:

or (var i=0; i < n; i++){
// Hier folgen die Befehlszeilen
}

Umgang mit Schleifen

Bei der Definition des Zählers und der Ermittlung des Abbruchkriteriums können Sie bei der richtigen Handhabung weitere Optimierungseffekte erzielen. Eine normale for-Schleife sieht wie folgt aus:

for (var i=0; i<obj.length; i++) {
// Hier folgen die Befehlszeilen
}

Bei diesem Vorgehen muss in jedem Durchlauf das aktuelle Objekt obj überprüft werden und die Länge des Arrays oder der Collection. Dies beeinflusst die Performance spürbar negativ. Eine deutliche Verbesserung bringt dieser Code mit sich:

for (var i=0; divs[i]; i++) {
// Hier folgen die Befehlszeilen
}

In diesem Fall ist die Abarbeitungsgeschwindigkeit, vor allem beim Internet Explorer, deutlich schneller. Sie müssen jedoch in diesem Fall trotz allem noch herausfinden, ob das Objekt an der angegebenen Stelle des Arrays existiert. Deswegen gibt es noch eine weitere Optimierung: Das beste Ergebnis erzielen Sie, wenn Sie einen temporären Zähler verwenden und diesen mit der Länge des Arrays vergleichen. Dies dient dann entsprechend als Abbruchkriterium.

for (var i=0, i_tmp=divs.length;
i<i_tmp; i++) {
// Hier folgen die Befehlszeilen
}

Mit diesem Vorgehen sind sowohl beim IE, als auch bei Firefox deutliche Performance-Verbesserungen zu erzielen.

Alternative zu for

Eine for-Schleife hat oft ihre Daseinsberechtigung. Wenn Sie jedoch nur wenige Schritte in einer Schleife haben und Sie immer mindestens einen Schleifendurchlauf durchführen, könnte der Einsatz einer do-while-Schleife positive Auswirkungen auf die Ausführungszeit haben.

do { } while( x-- );

Damit sparen Sie sich mehrere Operationen, die bei einer vergleichbaren for-Schleife in jedem Durchlauf zu erfüllen wären:

•  Prüfung, ob x existiert
•  Test, ob die Bedingung x<n (Abbruchbedingung) erfüllt ist
•  Durchführung von x+1

Innerhalb der while-Schleife ist lediglich die Durchführung der Aktion x=x-1 notwendig, wodurch Sie zwei Abarbeitungsschritte sparen. Dies fällt entweder bei nur wenigen Schritten innerhalb der Schleife oder bei einer hohen Anzahl von Schleifendurchläufen ins Gewicht.

Objekte zwischenspeichern

Im vielen Fällen macht es Sinn, die Inhalte eines Arrays zwischenzuspeichern, wenn Sie diese erneut im Laufe einer Schleife oder des Skripts nutzen wollen. Damit sparen Sie sich das mehrfache Laden. Im folgenden Beispiel wird in jedem Schleifendurchlauf auf ein Array zugegriffen, das außerhalb der Funktion definiert wurde.

initializeEvents: function()
{
for (var i=0, n = myarray.length;
i < n; i++ )
{
myarray[i].initialize();
}
}

Während des Abarbeitens der Schleife wird bei jedem Durchlauf die Variable außerhalb der Funktion gesucht

initializeEvents: function()
{
var myarray_int = myarray;
for (var i=0, n = myarray_int.length;
i < n; i++ )
{
Myarray_int[i].initialize();
}
}

myarray wird als lokales Array in der Variablen myarray_int gespeichert. Damit findet die Abarbeitung der Schleife ohne weitere Interaktion mit der Außenwelt statt, was zu deutlichen Performance-Gewinnen führt. Das Gleiche gilt für globale Variablen. Wenn Sie mehr als einmal innerhalb einer Schleife oder Funktion auf diese zugreifen, lohnt sich bereits der Einsatz einer lokalen Variablen:

var myvar1 = document.getElementById
('ID1');
var myvar2 = document.getElementById
('ID2');

Bei diesem Zugriff wird mehrfach auf Objekt document und dessen Elemente zugegriffen. Deutlich schneller kommen Sie ans Ziel, wenn Sie auch hierfür eine lokale Variable erzeugen und mit dieser arbeiten.

var mydoc = document;
var myvar1 = mydoc.getElementById
('ID1');
var myvar2 = mydoc.getElementById
('ID2');