Het DOM (Document Object Model) is de algemene naam voor de boomstructuur van HTML-tags. De impact ervan op de paginasnelheid is zodanig dat hoe complexer uw HTML-structuur is tijdens het weergeven van pagina's, hoe langzamer uw pagina zal zijn.

Volgens Lighthouse is de complexiteit van de De DOM-structuur wordt gemeten met behulp van drie statistieken. Om deze statistieken van hun referentiepunten te voorzien:

  • Het totale aantal tags moet zijn minder dan 1500
  • De maximale tagdiepte moet zijn minder dan 32
  • Het maximale aantal onderliggende tags moet zijn minder dan 60

In het bovenstaande voorbeeld is het totale aantal tags slecht, de maximale tagdiepte is goed, maar het maximale aantal onderliggende tags is slecht.

Het optimaliseren van DOM-elementen is volledig de verantwoordelijkheid van de frontend-stakeholder. Elke tag die willekeurig of willekeurig wordt gekozen wanneer de paginacode voor het eerst wordt gemaakt, brengt kosten met zich mee zodra het project is voltooid. Daarom nodigen we alle frontend-ontwikkelaars uit voor een moment van stilte en om hun ogen te openen.

Punten waarop een opgeblazen DOM de prestaties van de pagina negatief beïnvloedt, zijn onder meer:

  • Pagina's met een groot aantal knooppunten (tags) zullen ervaren netwerkcongestie en laadproblemen vanwege hun grote omvang, waardoor TTFB (Time to First Byte) toeneemt.
  • Renderen van geladen knooppunten om te creëren hun posities en stijlen kosten tijd, waardoor FCP (First Contentful Paint) toeneemt.
  • Naarmate het aantal knooppunten toeneemt, neemt de noodzakelijke belasting toe JavaScript-manipulaties belasten het geheugen, toenemende TFT (Time to Interactive).

Om DOM-optimalisatie te illustreren met een heel eenvoudig voorbeeld, overweeg het volgende waarbij zowel het aantal als de diepte van de DOM worden verminderd:

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

In plaats van dit te doen:

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

Het is noodzakelijk om dit te doen: De twee meest aanbevolen methoden om de DOM-grootte te verkleinen zijn lazyloading en paginering. Omdat kaartstructuren op lijstpagina's veel DOM bevatten, wordt oneindig scrollen of pagineren voorgesteld. Bij het bepalen van het aantal items in paginering moeten zeker de DOM-meetcriteria in aanmerking worden genomen. De tijd waar gewoonlijk rekening mee wordt gehouden het aantal producten in paginering is 15-20 seconden, maar dit deel moet eigenlijk worden berekend aan de kant van de frontend-stakeholder, gezien de DOM-grootte.

Een van de zeer eenvoudige oplossingen is om geen elementen toe te voegen die niet zichtbaar zijn op de pagina voor de HTML zonder ze te verbergen met CSS. Als een element moet worden weergegeven, moet dit later worden opgeroepen en aan de gebruiker worden getoond. Houd er rekening mee dat het verbergen van elementen met CSS de DOM vergroot.

Bronnen: