Lighthouse DOM Treemap - Hoe de grootte van de DOM te verkleinen
In de afgelopen jaren heeft Google veel waarschuwingen afgegeven met betrekking tot de buitensporige omvang van uw webtoepassing. Dit brengt hoge kosten met zich mee voor de gebruiker: trage weergave en slechte prestaties van de browser en gebruikerservaring.
Om de prestaties van uw applicatie te verbeteren, heeft Lighthouse geïntroduceerd de optie om de grootte van de DOM te verkleinen. Voor veel bedrijven is deze maatregel geïmplementeerd om het geheugengebruik en daarmee de omvang van het totale document te verminderen. Helaas kan een zeer kleine verbetering in het geheugenverbruik, in ieder geval in Chrome, dit prestatieprobleem terugbrengen.
Om je hierbij te helpen, in Chrome > we hebben nu een nieuwe functie waarmee u de plaatsen in de DOM-structuur kunt vinden die erg zwaar zijn: DOM Treemap.
De Treemap is een uitbreiding op Chrome Developer Tools, waar je kunt een extra tabblad toevoegen voor visualisatie van de DOM-boomstructuur.
Je kunt de locatie van alle DOM-knooppunten op je huidige pagina zien. Om te zien welke elementen de meeste kinderen hebben, klikt u op de knop "Kinderen" in de rechterbenedenhoek van de werkbalk.
De tool is ook uitgebreid met een functie om BEM-affiliciados te visualiseren. Hiermee kunt u zien hoe knooppuntintensief uw BEM-component gemiddeld is.
