Gepubliceerd: 8 okt. 2025
Een grote DOM kan de duur van stijlberekeningen en lay-outs verlengen, wat de responsiviteit van de pagina beïnvloedt . Een grote DOM verhoogt ook het geheugengebruik.
Een diepe DOM-boom is op zichzelf geen prestatieprobleem, maar is een symptoom van ontwerppatronen die onnodige elementnesting gebruiken .
Dit inzicht beschouwt de gehele DOM, inclusief de schaduwroots. DOM-knooppunten die geen elementen zijn, worden genegeerd. Ook de inhoud <iframe> wordt genegeerd.
Waar moet je op letten:
- Totaal aantal elementen : het totale aantal elementen in de DOM van uw pagina.
- DOM-diepte : de maximale diepte van de DOM-boom.
- Meeste kinderen : Het element met de meeste kinderelementen.
Hoe dit inzicht over te brengen
Dit inzicht is alleen onjuist als er sprake is van een grote herberekening van de lay-out of stijl die langer duurt dan 40 ms.
- Bij een grote lay-outupdate zijn meer dan 100 lay-outobjecten (dit zijn ruwweg elementen) betrokken.
- Een grote stijlherberekening heeft betrekking op meer dan 300 elementen.
Bij een storing worden deze gebeurtenissen in het vlamdiagram in het paneel Prestaties gemarkeerd.
Om de kosten van deze evenementen te verlagen:
- Leer hoe u de kosten van CSS-selectors kunt meten en de complexiteit van de stijl kunt verminderen .
- Minimaliseer de diepte van de DOM door onnodige nesting te verminderen.
- Overweeg om webcomponenten te implementeren om de Shadow DOM te gebruiken. Dit verkleint de DOM-grootte niet, maar verlaagt wel de kosten voor het opnieuw berekenen van stijlen.
Stapelspecifieke begeleiding
Dit inzicht biedt ook stackspecifieke richtlijnen voor pagina's die de volgende technologieën gebruiken:
Hoekig
Als u grote lijsten wilt renderen, kunt u virtueel scrollen gebruiken met de Component Dev Kit (CDK).
Reageren
- Gebruik een 'windowing'-bibliotheek zoals
react-windowom het aantal DOM-knooppunten dat wordt gemaakt te minimaliseren als u veel herhaalde elementen op de pagina weergeeft. - Minimaliseer onnodige herrenderingen met
shouldComponentUpdate,PureComponentofReact.memo. - Sla effecten alleen over totdat bepaalde afhankelijkheden zijn gewijzigd als u de
Effecthook gebruikt om de runtime-prestaties te verbeteren.