Vermijd een buitensporige DOM-grootte

Een grote DOM-structuur kan de prestaties van uw pagina op verschillende manieren vertragen:

  • Netwerkefficiëntie en laadprestaties

    Een grote DOM-structuur bevat vaak veel knooppunten die niet zichtbaar zijn wanneer de gebruiker de pagina voor het eerst laadt, waardoor de gegevenskosten voor uw gebruikers onnodig stijgen en de laadtijd wordt vertraagd.

  • Runtime-prestaties

    Terwijl gebruikers en scripts met uw pagina communiceren, moet de browser voortdurend de positie en stijl van knooppunten opnieuw berekenen . Een grote DOM-boom in combinatie met ingewikkelde stijlregels kan het renderen ernstig vertragen.

  • Geheugenprestaties

    Als uw JavaScript algemene querykiezers gebruikt, zoals document.querySelectorAll('li') , slaat u mogelijk onbewust verwijzingen op naar een zeer groot aantal knooppunten, waardoor de geheugenmogelijkheden van de apparaten van uw gebruikers kunnen worden overweldigd.

Hoe de Lighthouse DOM-grootte-audit mislukt

Lighthouse rapporteert het totale aantal DOM-elementen voor een pagina, de maximale DOM-diepte van de pagina en de maximale onderliggende elementen:

Voorkomt een buitensporige DOM-grootte. Ligthhouse-audit toont het totale aantal DOM-elementen, de maximale DOM-diepte en het maximale aantal onderliggende elementen.
Lighthouse benadrukt details over buitensporige DOM-groottes

Lighthouse markeert pagina's met DOM-bomen die:

  • Waarschuwt wanneer het lichaamselement meer dan ~800 knooppunten heeft.
  • Fouten wanneer het hoofdelement meer dan ~1400 knooppunten heeft.

Hoe de DOM-grootte te optimaliseren

Zoek in het algemeen naar manieren om DOM-knooppunten alleen te maken als dat nodig is, en om knooppunten te vernietigen als ze niet langer nodig zijn.

Als u een grote DOM-boom verzendt, probeer dan uw pagina te laden en handmatig te noteren welke knooppunten worden weergegeven. Misschien kunt u de niet-weergegeven knooppunten uit het in eerste instantie geladen document verwijderen en deze pas maken na een relevante gebruikersinteractie, zoals scrollen of klikken op een knop.

Als u tijdens runtime DOM-knooppunten maakt, kunt u met Subtree Modification DOM Change Breakpoints vaststellen wanneer knooppunten worden gemaakt.

Als u een grote DOM-boom niet kunt vermijden, is een andere aanpak voor het verbeteren van de weergaveprestaties het vereenvoudigen van uw CSS-selectors. Zie Reduce the Scope and Complexity of Style Calculations van Google voor meer informatie.

Zie voor meer details het artikel Hoe grote DOM-groottes de interactiviteit beïnvloeden, en wat u eraan kunt doen .

Stapelspecifieke begeleiding

Hoekig

Als u grote lijsten rendert, gebruik dan virtueel scrollen met de Component Dev Kit (CDK).

Reageer

  • Gebruik een "windowing"-bibliotheek zoals react-window om het aantal gecreëerde DOM-knooppunten te minimaliseren als u veel herhaalde elementen op de pagina weergeeft.
  • Minimaliseer onnodige herweergave met behulp van shouldComponentUpdate , PureComponent of React.memo .
  • Sla effecten alleen over totdat bepaalde afhankelijkheden zijn veranderd als u de Effect hook gebruikt om de runtime-prestaties te verbeteren.

Bronnen