DOM-Manipulationen optimieren
Entdecken Sie Techniken zur Minimierung von DOM-Reflows und Repaints, etwa das Abhängen von Elementen, das Bündeln von DOM-Aktualisierungen und das Zusammenfassen von Änderungen für bessere Performance.
DOM-Manipulationen optimieren ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Warum das DOM optimieren?
Das Document Object Model (DOM) beschreibt, wie Browser Ihre Webseite darstellen. Wenn Sie Elemente auf der Seite ändern, beispielsweise neue hinzufügen oder Styles aktualisieren, muss der Browser diese Änderungen darstellen.
Häufige oder nicht optimierte DOM-Manipulationen können Ihre Webseite verlangsamen und zu einer träge wirkenden Benutzererfahrung führen. Lernen wir, wie Sie sie schneller machen!
Reflows und Repaints
Jedes Mal, wenn Sie das Layout oder den Style eines Elements ändern, muss der Browser möglicherweise einen „Reflow“ durchführen, also das Layout von Teilen der Seite neu berechnen, oder einen „Repaint“, also die Pixel neu zeichnen.
- Reflow: Tritt auf, wenn sich Größe, Position oder Inhalt eines Elements ändern. Das ist aufwendig, da auch andere Elemente betroffen sind.
- Repaint: Tritt auf, wenn sich nur die Sichtbarkeit oder Farbe eines Elements ändert, nicht jedoch sein Layout. Er ist weniger aufwendig als ein Reflow.
Unser Ziel ist es, diese Vorgänge zu minimieren.
Ineffiziente DOM-Aktualisierungen
Stellen Sie sich vor, Sie fügen einer Liste viele Elemente nacheinander hinzu. Jede Hinzufügung kann einen Reflow und Repaint auslösen, insbesondere wenn Sie Styles oder Abmessungen ändern.
Bei wenigen Änderungen fällt das möglicherweise nicht auf. Bei Hunderten oder Tausenden kann Ihre Seite jedoch sehr langsam und nicht mehr reagierend werden.
Änderungen bündeln
Die effektivste Methode zur Optimierung von DOM-Operationen besteht darin, Änderungen zu „bündeln“. Anstatt viele kleine, einzelne Änderungen direkt am aktiven DOM vorzunehmen, sollten Sie möglichst alle Änderungen auf einmal durchführen.
Stellen Sie es sich wie das Streichen einer Wand vor: Eine große Farbschicht ist besser als viele kleine Farbkleckse.
Entfernen, ändern, wieder einfügen
Eine leistungsfähige Technik besteht darin, ein Element vorübergehend aus dem DOM zu entfernen, alle erforderlichen Änderungen daran vorzunehmen, während es „offline“ ist, und es anschließend wieder in das DOM einzufügen.
jQuerys .detach()-Methode eignet sich dafür hervorragend. Sie entfernt das Element, behält aber alle zugehörigen Daten und Event-Handler bei – anders als .remove().
Detach in Aktion
Dieses Beispiel zeigt, wie Sie ein Element entfernen, seinen Inhalt und Style mehrfach ändern und es anschließend wieder anhängen. Dadurch wird die Anzahl der Reflows auf einen einzigen beim erneuten Einfügen reduziert.
$(document).ready(function() {
// Assume this HTML exists: <ul id="myList"><li>Item A</li><li>Item B</li></ul>
const $list = $('#myList');
const $firstItem = $list.find('li:first');
// Detach the element
const $tempItem = $firstItem.detach();
// Make multiple changes while detached
$tempItem.text('DETACHED & MODIFIED');
$tempItem.css('background-color', 'yellow');
// Re-attach it to the list
$list.append($tempItem);
});Aktualisierungen fragmentieren
Wenn Sie viele neue Elemente hinzufügen, ist es ineffizient, sie einzeln zu erstellen und direkt an das DOM anzuhängen. Erstellen Sie stattdessen zunächst alle neuen Elemente im Speicher und hängen Sie sie anschließend gemeinsam an.
Sie können dazu einen HTML-String erstellen oder ein Array aus jQuery-Objekten anlegen und anschließend einen einzigen Aufruf von .append() verwenden.
Beispiel für gemeinsames Anhängen
Dieses Beispiel zeigt, wie mehrere Listenelemente erstellt und mithilfe eines HTML-Strings in einer einzigen DOM-Operation angehängt werden.
$(document).ready(function() {
// Assume this HTML exists: <ul id="batchList"></ul>
const $list = $('#batchList');
let newItemsHtml = ''; // Build HTML string
for (let i = 0; i < 5; i++) {
newItemsHtml += `<li>New Item ${i + 1}</li>`;
}
// Append all new items at once
$list.append(newItemsHtml);
});„Layout Thrashing“ vermeiden
Seien Sie vorsichtig, wenn Sie Layout-Eigenschaften wie .width(), .height() oder .offset() unmittelbar nach einer DOM-Änderung auslesen. Der Browser muss möglicherweise einen Reflow durchführen, um den korrekten, aktuellen Wert zu liefern.
Das wiederholte Schreiben in das DOM und anschließende Auslesen von Layout-Eigenschaften innerhalb einer Schleife wird als „Layout Thrashing“ bezeichnet und ist ein großer Leistungskiller. Bündeln Sie Lese- und Schreibvorgänge!
Ihren Code optimieren
Welche der folgenden Techniken eignen sich zur Optimierung der Performance von DOM-Manipulationen in jQuery?
Zusammenfassung: Schnelleres DOM
Sehr gut! Sie haben wichtige Strategien zur Optimierung von DOM-Manipulationen kennengelernt:
- Verstehen Sie die aufwendigen Reflows und Repaints.
- Bündeln Sie Änderungen, anstatt einzelne Aktualisierungen vorzunehmen.
- Verwenden Sie
.detach(), um Elemente offline zu ändern. - Hängen Sie mehrere Elemente gleichzeitig an, oft durch das Erstellen eines HTML-Strings.
- Vermeiden Sie „Layout Thrashing“, indem Sie DOM-Lese- und Schreibvorgänge gruppieren.
Mit diesen Techniken werden Ihre jQuery-Anwendungen deutlich schneller und reaktionsfähiger!
Häufig gestellte Fragen
Ist die Lektion „DOM-Manipulationen optimieren“ kostenlos?
Ja — der vollständige Text von „DOM-Manipulationen optimieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „DOM-Manipulationen optimieren“?
Entdecken Sie Techniken zur Minimierung von DOM-Reflows und Repaints, etwa das Abhängen von Elementen, das Bündeln von DOM-Aktualisierungen und das Zusammenfassen von Änderungen für bessere Performan… Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.
Wie lange dauert die Lektion „DOM-Manipulationen optimieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- DOM-Manipulationen optimieren
- Effiziente Ereignisverarbeitung und Throttling
- Caching und Deferred-Objekte nutzen