HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » JavaScript » JavaScript Artikel » Schnelleres JavaScript

JavaScript Artikel: Schnelleres JavaScript

von Jan Winkler

JavaScript ansich ist eigentlich eine relativ schnell ausgeführte Sprache. Wenn es allerdings darum geht große Massen von Befehlen zu verarbeiten können kleine Tricks helfen, das Script schneller zu machen.

Anzeige

Punkte sind Zeit  nach oben

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; }

Variablen definieren  nach oben

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);} 

Aufrufe vermeiden  nach oben

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); 

Schleifen vorzeitig beenden  nach oben

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);

Switch und Else verwenden  nach oben

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();

Eval() vermeiden  nach oben

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; } 

Intern und Extern  nach oben

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();



« zurück weiter »
Bewerten

Aus dem JavaScript Artikel Forum ...

zum JavaScript Artikel Forum »

 

JavaScript Artikel

.Autor:Jan Winkler.
. Bewertung:
JavaScript Artikel: Schnelleres JavaScript HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 24 Beiträge im JavaScript Artikel Forum .

Navigation

Software - Entwickler (m/w) Java / GIS – Stuttgart von Job Ambition GmbH
PHP - Entwickler (m/w) - Standort Köln von Job Ambition GmbH
PHP - Entwickler (m/w) - Offenbach am Main von Job Ambition GmbH
Web-Developer (m/w) – am Standort Bühl von Job Ambition GmbH
[B] Individuelle Texterstellung – Unique Content zu fairen P von texttown
Senior PHP-Programmierer (m/w) – Raum Köln von Job Ambition GmbH
html-Datei in Container nachladen von Piwi
Wie ticken Web-Entwickler eigentlich im Social Web? von Job Ambition GmbH
Gesucht: Senior PHP-Programmierer (m/w) – am Standort Köln von Job Ambition GmbH
Achtung: Seite ist nicht mehr gültig von Sir Quicksand
Excel-Spalte auslesen in txt. speichern. von n_o.o_ b
(Junior) Java Entwickler (m/w) - am Standort Stuttgart von Job Ambition GmbH
Stellen hinter dem Komma Abfragen und ändern. von Beckers
Re: Undefined variable - bitte um Hilfe von admin
Wie erstelle ich eine Tag-Wolke aus Flash? von Suesse_Muse

zum Forum »


 
     
 

Anzeige