Performancegewinn durch Minimierung der DOM Manipulationen
Manipulationen am DOM (Document Object Model) sind häufig Ursache für geringe Webseiten-Performance bzw. lange Ladezeiten. Durch bestimmte Techniken ist es aber möglich, die Verluste zu begrenzen.
Wie entsteht dieser Performanceverlust?
Das DOM (Document Object Model) liegt als Baumstruktur jeder Webseite zu Grunde. Es enthält alle Elemente einer Webseite in hierarchischer Form (Parent-Child-Beziehung) und wird beim Aufbau einer Webseite zu Beginn im Hintergrund aufgebaut. Nach dem Aufbau des DOM-Baumes können Manipulationen per Javascript vorgenommen werden. Dies kann zu einem nochmaligen Aufbau (re-rendering) des DOM-Baumes führen und ist i.d.R. mit Performance-Verlust bzw. einer Erhöhung der Ladezeit verbunden.
Ziel sollte es sein:
- DOM-Manipulationen zu minimieren
- die Größe des DOM-Baumes generell klein zu halten
(unnötige Tags und Verschachtelungen vermeiden)
Wie läßt sich die Größe des DOM ermitteln?
Fügen Sie die folgenden Befehle temporär in Ihre Webseite ein oder geben Sie den Befehl in den Befehlseditor der Konsole des Firebugs ein (ohne die alert-Zeile).
Es wird Ihnen die Gesamtanzahl aller DOM-Elemente der aktuellen Webseite angezeigt.
Eine Gesamtanzahl unter 500 Elemente ist hervorragend.
Ab 700 Elementen sollte man nach Wegen suchen, um die Anzahl der Elemente zu reduzieren (Vereinfachung der Webseite, Entfernung von unnötigen Verschachtelungen).
alert(n);
Welche Aktionen führen zum nochmaligen Aufbau des DOM?
- Einfügen oder Löschen von Tags (Nodes)
- Änderung an Attributen, die das Layout beeinflussen
- Änderung von Stylesheet-Klassennamen
- Änderung der Größe von Elementen
Wie kann man auf einfache Art die Manipulation am DOM minimieren?
Clonen von Elementen
Änderungen werden an einem Clone (Duplikat) des Objektes durchgeführt und erst am Ende, wenn alle Änderungen durchgeführt wurden,
wird das Original durch den Clone ersetzt.
var clone = original.cloneNode(true);
clone.setAttribute('width','30%');
var elem, inhalt;
for( var i = 0; i < textlist.length; i++ ) {
elem = document.createElement('p');
inhalt = document.createTextNode(textlist[i]);
elem.appendChild(inhalt);
clone.appendChild(elem);
}
original.parentNode.replaceChild(clone,original);
Zusammenfassung von mehreren Änderungen
Führen Sie Styleänderungen nicht einzeln durch, sondern definieren Sie eine Klasse, die alle Änderungen enthält und ändern Sie danach nur die Klasse am Element.
var myDIV = document.getElementById('myDIV');
myDIV.style.background = '#333';
myDIV.style.color = '#fff';
myDIV.style.border = '1px solid #00f';
// schneller:
div {
background: #ddd;
color: #000;
border: 1px solid #000;
}
div.highlight {
background: #333;
color: #fff;
border: 1px solid #00f;
}
document.getElementById('myDIV').className = 'highlight';
Durchführung der Änderungen an unsichtbaren Elementen
Blenden Sie Elemente aus und führen Sie danach die Änderungen durch. Wenn alle Änderungen vorgenommen wurden, blenden Sie die Elemente wieder ein.
posElem.style.display = 'none';
posElem.appendChild(newNodes);
posElem.style.width = '10em';
// ... weitere Änderungen ...
posElem.style.display = 'block';
Abschließend sei bemerkt, dass es noch deutlich mehr Möglichkeiten gibt, um die Manipulationen am DOM zu reduzieren. Ich habe mich hier aber bewußt nur auf die wesentlichen Techniken beschränkt.