Tipps & Tricks für schnelle Javascripts
Skript-Beschleuniger

DeveloperIT-ProjekteSoftware

Javascript ist eigentlich eine flott ausgeführte Sprache. Doch wenn es darum geht, große Massen von Befehlen zu verarbeiten, können kleine Tricks helfen, das Skript schneller zu machen.

Kurze Objektnamen

Tipps & Tricks für schnelle Javascripts

Punkte sind Zeit: Jeder Punkt und jede eckige Klammer innerhalb eines Objekts bedeutet, dass das entsprechende Unterobjekt erst gefunden werden muss. Das kostet Rechenzeit. Verzichten Sie so oft wie möglich auf lange Objektbezeichnungen wie window.document.mein Formular.meinInput.value und verkürzen Sie das Ganze, indem Sie das Objekt einer Variablen zuweisen. Außerdem kann auch die with-Anweisung zur Zeitersparnis genutzt werden. Angenehmer Nebeneffekt: Der Quelltext wird zugleich kürzer. Beispiel:


//statt:
var a = '';
for(i=0; i { a += document.meinFormular.meinSelect[i].value; }

//besser:
var a = '';
var obj = document.meinFormular.meinSelect;
for(i=0; i { a += obj[i].value; }

//oder:
var a = '';
with(document.meinFormular)
{
for(i=0; i { a += meinSelect[i].value; }
}


Variablen definieren

Tipps & Tricks für schnelle Javascripts

Im Gegensatz zu anderen Programmiersprachen besteht bei Javascript bekanntermaßen nicht die Pflicht, Variablen zu deklarieren. Dies vereinfacht mitunter zwar die Programmierung, kann aber Einbußen bei der Geschwindigkeit eines Skripts mit sich bringen. Der Vorteil bei der Definition von Variablen besteht darin, dass der Browser den Speicher schon im Vornherein festsetzten kann und dies nicht erst während der Laufzeit des Skripts geschehen muss. Außerdem empfiehlt es sich, verstärkt auf globale Variablen zu setzten. Ein Beispiel:


//statt:
function machwas()
{a = 1; /*...*/ return(a);}

//besser:
function machwas()
{var a; a = 1; /*...*/ return(a);}

//oder:
var a;
function machwas()
{a = 1; /*...*/ return(a);}


Schleifen abbrechen

Tipps & Tricks für schnelle Javascripts

for-Schleifen sind zwar einfach zu realisieren, absolvieren aber oft mehr Durchläufe als nötig. Soll etwa aus einem Array ein bestimmter Wert gefunden werden, muss die Schleife nicht zwangsläufig bis zum Ende des Arrays durchlaufen, sondern kann nach dem Fund abgebrochen werden.
Oftmals empfiehlt sich auch die Verwendung von while– beziehungsweise do-while-Schleifen an Stelle einer for-Variante, wenn dies zu dem Effekt führt, dass damit die Durchlaufzahl verkürzt werden kann. Beispiel:


var a = new Array('ab','cd','ef', 'gh','ij','kl','mn');

//statt:
function bekommIndex()
{ b = -1;
for(i=0; i { if(a[i].search('e') != -1){b = i;} }
return(b);
}

//besser:
{ if(a[i].search('e') != -1){b = i; break;} }

//oder:
function bekommIndex()
{ b = -1; i = 0; found = false;
while(found == false)
{
if(a[i].search('e') != -1){b = i; found = true;}
i++;
}
return(b);
}


switch und else

Tipps & Tricks für schnelle Javascripts

Vielfach sind Reihen von if-Bedingungen zwar übersichtlich, aber nicht die schnellste Variante, die Abfrage zu lösen. Bei Zweifach-Werten wie zum Beispiel true/false empfiehlt es sich, grundsätzlich für den zweiten Fall eine else-Bedingung zu verwenden, da die Bedingung ja sowieso keinen anderen Wert annehmen kann. Bei Variablen, die mehrere Werte beinhalten können, ist es meist besser, an Stelle von unzähligen ifs und elses eine switch-Anweisung zu verwenden. Die ist zwar nicht ganz so schön zu schreiben, wird dafür vom Browser aber wesentlich schneller interpretiert. Ein Beispiel:


//statt:
if(a==1){machdas()}
else if{a==2}{machdies()}
else if{a==3}{machjenes()}
else{wasanderes()}

//besser:
switch(a)
{
case 1: machdas(); break;
case 2: machdies(); break;
case 3: machjenes(); break;
default: wasanderes();
}


Intern und extern

Tipps & Tricks für schnelle Javascripts

Es besteht ein gewisser Unterschied, ob in das Rendern (Darstellen des Browsers) eingegriffen werden muss oder nicht. Grundsätzlich empfiehlt es sich, dies so wenig wie möglich vorzunehmen. Vermeiden Sie daher zum Beispiel, innerhalb einer Schleife eine Seite zu generieren. Wählen Sie besser diese Alternative: Speichern Sie den generierten Inhalt und geben Sie ihn nach der Abarbeitung der Schleife aus. Beispiel:


//anstatt:
document.open();
for(i=0;i<1000;i++){document.writeln('Durchlauf: '+i+'
');}
document.close();

//besser:
var s = '';
document.open();
for(i=0;i<1000;i++){s += 'Durchlauf: '+i+'
';}
document.write(s);
document.close();