Stay a while, and listen
Grundszenario:
Wir haben ein DOM Objekt und wollen seine style Attribute per JavaScript verändern.
Unser HTML
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