DOM (Document Object Model) er det generelle navnet på trestrukturen til HTML-tagger. Dens innvirkning på sidehastigheten er slik at jo mer kompleks HTML-strukturen din er under sidegjengivelse, desto tregere blir siden din.

I følge Lighthouse er kompleksiteten til DOM-strukturen måles ved hjelp av tre beregninger. For å gi disse beregningene sine referansepunkter:

  • Det totale antallet tagger skal være mindre enn 1500
  • Maksimal tagdybde bør være mindre enn 32
  • Maksimalt antall underordnede tagger bør være mindre enn 60

I eksemplet ovenfor er det totale antallet tagger dårlig, maksimal taggdybde er god, men maksimalt antall underordnede tagger er dårlig.

Optimalisering av DOM-elementer er helt og holdent ansvaret til frontend-interessenten. Hver kode som velges tilfeldig eller vilkårlig når sidekoden først opprettes, har en kostnad når prosjektet er fullført. Derfor inviterer vi alle frontend-utviklere til et øyeblikks stillhet og åpne øynene.

Punkter der en oppblåst DOM påvirker sideytelsen negativt inkluderer:

  • Sider med et stort antall noder (tagger) vil oppleve nettverksoverbelastning og lastevansker på grunn av deres store størrelse, og øker dermed TTFB (tid til første byte).
  • Gjengir innlastede noder for å opprette deres posisjoner og stiler tar tid, og øker dermed FCP (First Contentful Paint).
  • Etter hvert som antall noder øker, vil den nødvendige belastningen med JavaScript-manipulasjoner belaster minnet, økende TFT (Time to Interactive).

For å illustrere DOM-optimalisering med et veldig enkelt eksempel, vurder følgende der både antallet og dybden til DOM reduseres:

<div id="nav-element">
 <ul>
 </ul>
</div>

I stedet for å gjøre dette:

<ul id="nav-element">
</ul>

Det er nødvendig å gjøre dette: De to mest anbefalte metodene for å redusere DOM-størrelsen er lat lasting og paginering. Siden kortstrukturer på oppføringssider inneholder mye DOM, foreslås uendelig rulling eller paginering. Når du bestemmer deg for antall elementer i paginering, bør DOM-målekriteriene definitivt vurderes. Tiden som vanligvis vurderes antall produkter i paginering er 15-20 sekunder, men denne delen bør faktisk beregnes på frontend-interessentens side, med tanke på DOM-størrelsen.

En av de veldig enkle løsningene er å ikke legge til elementer som ikke er synlige på siden til HTML uten å skjule dem med CSS. Hvis et element må vises, bør det kalles opp senere og vises til brukeren. Du bør være klar over at det å skjule elementer med CSS forstørrer DOM.

kilder: