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:
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-windowom het aantal gecreëerde DOM-knooppunten te minimaliseren als u veel herhaalde elementen op de pagina weergeeft. - Minimaliseer onnodige herweergave met behulp van
shouldComponentUpdate,PureComponentofReact.memo. - Sla effecten alleen over totdat bepaalde afhankelijkheden zijn veranderd als u de
Effecthook gebruikt om de runtime-prestaties te verbeteren.