DOMstorleken

DOMstorleken är måttet på storleken och komplexiteten hos Document Object Model för en webbsida. Den definieras vanligtvis som antalet noder i DOM-trädet, men kan även beskrivas som den mängd minne som DOMen förbrukar under körning. Verktyg som Chrome DevTools och Lighthouse visar DOMstorleken som en del av prestandaanalyser. Att uppskatta DOMstorleken kan göras genom att räkna antalet element i dokumentet eller genom att använda profileringsverktyg som mäter DOM-trädet i körande läge.

En stor DOM kan påverka prestanda negativt, särskilt på mobila enheter eller äldre maskiner. När DOM ändras krävs ofta omberäkning av layout och målning (reflow och repaint), och varje extra nod ökar konsumtionen av CPU-tid och minne. Detta kan leda till längre laddningstider och långsammare användarupplevelser, särskilt vid interaktioner som kräver ofta DOM-uppdateringar.

Orsaker till ett stort DOM-träd inkluderar många inneslutande element, djup eller repetitiva wrappers, långa listor och kontinuerlig dynamisk tillägg av noder via JavaScript eller ramverk. Ofta byggs stora DOM-träd upp när innehåll renderas i flera steg eller upprepade gånger vid klientrendering.

Åtgärder för att minska domstorleken inkluderar att förenkla strukturen och ta bort onödiga element, använda CSS för layout i stället för extra markup, använda virtuell rendering för långa listor, dela upp innehåll i flera sidor eller använda lazy loading, batcha DOM-uppdateringar med dokument-fragment eller liknande tekniker, rensa borttagna noder och event-lyssnare, överväga server-rendering för initial markup och använda ramverk som tenderar att hålla den faktiska DOM-storleken nere.