Das DOM (Document Object Model) ist der allgemeine Name für die Baumstruktur von HTML-Tags. Sie hat Auswirkungen auf die Seitengeschwindigkeit: Je komplexer Ihre HTML-Struktur beim Rendern der Seite ist, desto langsamer ist Ihre Seite.

Laut Lighthouse ist die Komplexität der Die DOM-Struktur wird anhand von drei Metriken gemessen. Um diese Kennzahlen mit Referenzpunkten zu versehen:

  • Die Gesamtzahl der Tags sollte weniger als 1500
  • Die maximale Tag-Tiefe sollte weniger als 32
  • Die maximale Anzahl untergeordneter Tags sollte weniger als 60

Im obigen Beispiel ist die Gesamtzahl der Tags unzureichend und die maximale Tag-Tiefe gut, aber die maximale Anzahl der untergeordneten Tags ist unzureichend.

Die Optimierung von DOM-Elementen liegt vollständig in der Verantwortung des Frontend-Stakeholders. Jedes zufällig oder willkürlich ausgewählte Tag bei der Erstellung des Seitencodes hat nach Abschluss des Projekts einen Wert. Daher laden wir alle Frontend-Entwickler zu einer Schweigeminute ein und bitten sie, die Augen zu öffnen.

Zu den Punkten, an denen sich ein aufgeblähter DOM negativ auf die Seitenleistung auswirkt, gehören:

  • Seiten mit einer großen Anzahl von Knoten (Tags) erleben Netzwerküberlastung und Ladeschwierigkeiten aufgrund ihrer Größe, wodurch die TTFB (Time to First Byte) erhöht wird.
  • Rendern geladener Knoten zum Erstellen ihre Positionen und Stile brauchen Zeit, wodurch FCP (First Contentful Paint) erhöht wird.
  • Mit zunehmender Anzahl von Knoten steigt die erforderliche Last mit JavaScript-Manipulationen belasten den Speicher, wodurch die TFT (Time to Interactive) erhöht wird.

Um die DOM-Optimierung anhand eines sehr einfachen Beispiels zu veranschaulichen, betrachten Sie das Folgende, bei dem sowohl die Anzahl als auch die Tiefe des DOM reduziert werden:

<div id="nav-element">
 <ul>
 </ul>
</div>

Stattdessen tun Sie Folgendes:

<ul id="nav-element">
</ul>

Das ist notwendig: Die beiden am häufigsten empfohlenen Methoden zur Reduzierung der DOM-Größe sind Lazy Loading und Paginierung. Da Kartenstrukturen auf Listenseiten viel DOM enthalten, wird Infinite Scroll oder Paginierung empfohlen. Bei der Entscheidung über die Anzahl der Elemente in der Paginierung sollten die DOM-Messkriterien unbedingt berücksichtigt werden. Die Zeit, die normalerweise für die Anzahl der Produkte in der Paginierung beträgt 15-20 Sekunden, aber dieser Teil sollte eigentlich auf der Seite des Frontend-Stakeholders unter Berücksichtigung der DOM-Größe berechnet werden.

Eine der einfachsten Lösungen besteht darin, keine Elemente hinzuzufügen die auf der Seite nicht sichtbar sind, in das HTML einfügen, ohne sie mit CSS auszublenden. Wenn ein Element angezeigt werden muss, sollte es später aufgerufen und dem Benutzer angezeigt werden. Sie sollten sich bewusst sein, dass das Ausblenden von Elementen mit CSS das DOM vergrößert.

Quellen: