DOM (Document Object Model) er det generelle navn for træstrukturen af ​​HTML-tags. Dens indvirkning på sidehastigheden er sådan, at jo mere kompleks din HTML-struktur er under sidegengivelse, jo langsommere bliver din side.

Ifølge Lighthouse er kompleksiteten af DOM-strukturen måles ved hjælp af tre metrics. For at give disse metrics deres referencepunkter:

  • Det samlede antal tags skal være mindre end 1500
  • Den maksimale tagdybde bør være mindre end 32
  • Det maksimale antal underordnede tags bør være mindre end 60

I ovenstående eksempel er det samlede antal tags ringe, den maksimale tagdybde er god, men det maksimale antal underordnede tags er ringe.

Optimering af DOM-elementer er udelukkende frontend-interessentens ansvar. Hvert tag, der vælges tilfældigt eller vilkårligt, når sidekoden først oprettes, har en pris, når projektet er afsluttet. Derfor inviterer vi alle frontend-udviklere til et øjebliks stilhed og til at åbne deres øjne.

Punkter, hvor en oppustet DOM påvirker sidens ydeevne negativt, omfatter:

  • Sider med et stort antal noder (tags) vil opleve netværksoverbelastning og lastningsbesvær på grund af deres store størrelse, hvilket øger TTFB (Time to First Byte).
  • Gengivelse af indlæste noder for at oprette deres positioner og stilarter tager tid, hvilket øger FCP (First Contentful Paint).
  • Efterhånden som antallet af noder stiger, vil den nødvendige belastning med JavaScript-manipulationer belaster hukommelsen, øger TFT (Time to Interactive).

For at illustrere DOM-optimering med et meget simpelt eksempel, overvej følgende, hvor både antallet og dybden af ​​DOM reduceres:

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

I stedet for at gøre dette:

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

Det er nødvendigt at gøre dette: De to mest anbefalede metoder til at reducere DOM-størrelsen er doven indlæsning og paginering. Da kortstrukturer på listesider indeholder en masse DOM, foreslås uendelig rulning eller paginering. Når man beslutter sig for antallet af elementer i paginering, bør DOM-målekriterierne bestemt tages i betragtning. Den tid, der normalt overvejes antallet af produkter i paginering er 15-20 sekunder, men denne del bør faktisk beregnes på frontend-interessenterets side i betragtning af DOM-størrelsen.

En af de meget simple løsninger er ikke at tilføje elementer som ikke er synlige på siden til HTML uden at skjule dem med CSS. Hvis et element skal vises, skal det kaldes senere og vises til brugeren. Du skal være opmærksom på, at skjule elementer med CSS forstørrer DOM.

kilder: