Lighthouse DOM Trädkarta - Hur man minskar storleken på DOM:en
Under de senaste åren har Google utfärdat många varningar angående den överdrivna storleken på din webbapplikation. Detta kommer till en mycket hög kostnad för användaren: långsam rendering och dålig prestanda för webbläsaren och användarupplevelsen.
För att förbättra prestandan för din applikation har Lighthouse introducerat möjligheten att minska storleken på DOM:en. För många företag har denna åtgärd implementerats för att minska minnesförbrukningen och därmed storleken på det totala dokumentet. Tyvärr kan en mycket liten förbättring av minnesförbrukningen, åtminstone i Chrome, återigen ge upphov till detta prestandaproblem.
För att hjälpa dig med detta har vi nu i Chrome en ny funktion som hjälper dig att lokalisera platserna i DOM-trädet som verkligen är tunga: DOM Treemap.
Treemap är en förlängning av Chrome Developer Tools, där du kan lägga till en extra flik för visualisering av DOM-trädet.
Där kan du se platsen för alla DOM-noder på din aktuella sida. För att hitta vilka element som har flest barn, klicka helt enkelt på knappen "Children" i nedre högra hörnet av verktygsfältet.
Verktyget har också utökats med en funktion för att visualisera BEM-affiniciados. Detta gör att du kan se hur nodintensiva dina BEM-komponenter är i genomsnitt.
