Sea of Sin / Blog

JavaScript Tipp-Kick #2 - Referenzen
Stay a while, and listen

Grundszenario:
Wir haben ein DOM Objekt und wollen seine style Attribute per JavaScript verändern.

Unser HTML

<div id=“div1“>Container</div>

Unser JavaScript Objekt

document.getElementById('div1');

Step 1

document.getElementById('div1').style.backgroundColor = 'red';
document.getElementById('div1').style.marginTop = '10px';
document.getElementById('div1').style.marginLeft = '10px';
document.getElementById('div1').style.padding = '10px';
document.getElementById('div1').style.color = 'green';

Eine For Schleife, welche 1000 mal diesen Schnipsel durchgeht, benötigt in den verschiedensten Browser folgende Zeiten:

FF 3
207 Millisekunden

FF2
187 Millisekunden

IE7
235 Millisekunden

Opera
94 Millisekunden

Konqueror
302 Millisekunden



Step 2

Das ganze geht natürlich schneller. In dem das Ergebnis von document.getElementById('div1') in eine Variable geschrieben und mit dieser Variable gearbeitet wird. Also ist dies eine Referenz auf den DOM Knoten. Wie dies intern gehandhabt wird, kann ich leider nicht sagen, ob es jetzt eine wirkliche Referenz auf den Speicher ist.

Die Änderungen sind jedenfalls folgende:

var oDiv = document.getElementById('div1');
oDiv.style.backgroundColor = 'red';
oDiv.style.marginTop = '10px';
oDiv.style.marginLeft = '10px';
oDiv.style.padding = '10px';
oDiv.style.color = 'green';

Sieht schon ein wenig übersichtlicher aus und was sagen die Zeiten?
Browser anschmeisen, Schleife 1000 mal laufen los ... go ...

FF 3
152 Millisekunden

FF2
141 Millisekunden

IE7
109 Millisekunden

Opera
47 Millisekunden

Konqueror
240 Millisekunden


Hat sich doch schon ein wenig gelohnt.

Das ganze geht aber noch ein ticken schneller. Man sollte im Hinterkopf behalten, immer wenn eine Eigenschaft eines Objektes aufgerufen wird, muss das Objekt aufgerufen werden und dann die Eigenschaft.

D.h. Bei document.getElementById('div1').style.backgroundColor müssen 4 Knoten abgeklappert werden um ans Ziel zu kommen. Wenn dies nur einmal geschieht, sollte hier nichts verändert werden. Jedoch bei mehrmaligem Aufrufen können Referenzen einiges an Zeit sparen.

Der 3te Schritt steigert das ganze noch einmal, der Clou ist, wir gehen direkt auf das style Attribute des Objektes.

Aus dem obigen Stück wird also:

var style = document.getElementById('div1').style;
 
style.backgroundColor = 'red';
style.marginTop = '10px';
style.marginLeft = '10px';
style.padding = '10px';
style.color = 'green';

jaja ... red net ... was ist mit den Zeiten?


FF 3
121 Millisekunden

FF2
94 Millisekunden

IE7
63 Millisekunden

Opera
31 Millisekunden

Konqueror
210 Millisekunden


Diese Taktik hat in unserem kleinen Beispiel bei jedem Browser 50% Performancesteigerung gebracht. Beim guten alten IE sogar einiges mehr. Von 235 auf 63 ist dies dann auch keine Kleinigkeit mehr welche man so unter den Teppich kehren kann.

Bedenkt, solche Optimierungen immer da verwenden wo diese angebracht sind :-)

Wer dies Live testen will, ich habe extra ein kleines Livedemo erstellt.
Hier seht ihr von Links nach Rechts die Steps, schön zum vergleichen

Gruß
hen