Schnelleres JavaScript

Punkte sind Zeit! Jeder Punkt und jede (eckige) Klammer innerhalb eines Objektes bedeutet, dass das entsprechende Unterobjekt erst gefunden werden muss. Das kostet Rechenzeit. Verzichten Sie so oft wie möglich auf lange Objektbezeichnungen wie z.B. window.document.meinFormular.meinInput.value und verkürzen Sie das ganze indem Sie das Objekt einer Variable zuweisen die stattdessen verwendet wird. Außerdem kann auch die with-Anweisung zur Zeitersparnis genutzt werden. Angenehmer Nebeneffekt: Der Quelltext wird zugleich kürzer durch die eingesparte Objekt-Schreibweise. Beispiel:

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

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

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

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 Scriptes mit sich bringen. Der Vorteil bei der Definition von Variablen besteht im Grunde darin, dass der Browser den Speicher schon im Vornherein festsetzten kann und dies nicht erst während der Laufzeit des Scriptes geschehen muss. Außerdem empfiehlt es sich verstärkt auf globale Variablen zu setzten. 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);} 

Funktionen weisen im allgemeinen Objekten oder Variablen einen neuen Wert zu. Dies bedeutet für den Browser dass er auf den Speicherplatz des Objektes bzw. der Variablen zugreifen muss um diesen dann neu schreiben zu können. Um auch hierbei wertvolle Zeit zu sparen empfiehlt es sich Aufrufe oftmöglich zu vermeiden und stattdessen direkt auf das Resultat einer Funktion zuzugreifen (gibResultat().weiterverarbeiten()). Ebenso muss beispielsweise ein String nicht erst innerhalb einer Variablen gespeichert werden um mit ihm zu arbeiten. Beispiel:

//statt:
a = ‚mein Text‘;
b = a.replace(‚m‘,’d‘);
c = b.substr(0,4);

//besser:
a = ‚mein Text‘.replace(‚m‘,’d‘).substr(0,4); 

For-Schleifen sind zwar einfach zu realisieren, machen aber oftmals mehr Durchläufe als nötig. Soll beispielsweise aus einem Array ein bestimmter Wert gefunden werden, muss die Schleife nicht zwangsläufig bis zum Ende des Arrays durchlaufen, sondern kann vielmehr nach dem Fund abgebrochen werden. Oftmals empfiehlt sich auch die Verwendung von while– bzw. do–while-Schleifen anstelle einer for-Variante, wenn dadurch 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<a.length; 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);
} 

Vielfach sind Reihen von if-Bedingungen zwar übersichtlich aber nicht die schnellste Variante die Abfrage zu lösen. Bei zweifach-Werten (wie z.B. true/false oder 1/2) empfiehlt es sich grundsätzlich für den zweiten Fall eine else-Bedinung zu verwenden (da die Bedinung ja sowieso keinen anderen Wert annehmen kann). Bei Variablen die mehrere Werte beinhalten können ist es meist besser anstelle von unzähligen if’s und else’s lieber eine switch-Anweisung zu verwenden. Die ist zwar nicht ganz so schön zu schreiben, wird dafür vom Browser aber wesentich schneller interpretiert. 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();
} 

Die eval-Methode wird zwar von vielen Programmieren gern verwendet, weil sich damit quasi aus dem nichts neuer Code einschieben lässt, dennoch bietet sie für die Geschwindigkeit des Scripts gewisse Nachteile. Dadurch, dass der Browser den entstandenen Code erst neu verarbeiten muss wird der Betrieb des Scriptes gebremst. Bei relativ sicheren Verfahren (z.B. wenn durch eval lediglich entschieden wird, ob das eine oder das andere Objekt verwendet wird) empfiehlt es sich oftmals lieber eine Abfrage mehr einzubauen. Auch ist es bei verschachtelten (Unter-)Objekten, die erst durch die eval-Methode definiert werden, ist oftmals klüger (und schneller) anstelle der Methode das Unterobjekt über den in eckigen Klammern stehenden Namen aufzurufen. Beispiel:

//statt:
function setzeWert(a,b)
{ eval(‚document.all.’+a+‘.style.color = ‚+b); }

//besser:
function setzeWert(a,b)
{ document.all[a].style.color = b; } 

Es besthet 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 z.B. innerhalb einer Schleife eine Seite zu generieren und speichern Sie lieber den generierten Inhalt und lassen Ihn nach der Schleife ausgeben. Beispiel:

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

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