A DOM (Document Object Model) a HTML címkék fastruktúrájának általános neve. Az oldalsebességre gyakorolt ​​hatása olyan, hogy minél összetettebb a HTML-struktúra az oldal megjelenítése során, annál lassabb lesz az oldal.

Lighthouse szerint a komplexitás a A DOM-struktúrát három mérőszámmal mérik. A mutatók referenciapontjaikkal való ellátásához:

  • A címkék teljes száma legyen kevesebb mint 1500
  • A címke maximális mélysége legyen kevesebb mint 32
  • A gyermekcímkék maximális száma lehet kevesebb mint 60

A fenti példában a címkék teljes száma gyenge, a maximális címkemélység jó, de a gyermekcímkék maximális száma gyenge.

A DOM-elemek optimalizálása teljes mértékben a frontend érdekelt fél felelőssége. Az oldalkód első létrehozásakor minden véletlenszerűen vagy önkényesen kiválasztott címkének költsége van a projekt befejezése után. Ezért meghívunk minden frontend fejlesztőt egy pillanatnyi csendre és nyissa ki a szemét.

Azok a pontok, ahol a megnövekedett DOM negatívan befolyásolja az oldal teljesítményét:

  • A nagyszámú csomóponttal (címkével) rendelkező oldalak tapasztalhatók nagy méretük miatt hálózati torlódások és terhelési nehézségek, ezzel növelve a TTFB-t (Time to First Byte).
  • Betöltött csomópontok renderelése a létrehozáshoz pozíciójuk és stílusuk időbe telik, ezzel növelve az FCP-t (First Contentful Paint).
  • A csomópontok számának növekedésével a szükséges terhelést A JavaScript manipulációk terhelik a memóriát, növeli a TFT-t (Time to Interactive).

A DOM optimalizálás egy nagyon egyszerű példával való illusztrálásához vegye figyelembe a következőket, ahol a DOM száma és mélysége egyaránt csökken:

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

Ahelyett, hogy ezt tenné:

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

Ezt meg kell tenni: A DOM méretének csökkentésére a két leginkább javasolt módszer a lusta betöltés és a lapozás. Mivel a listaoldalak kártyaszerkezetei sok DOM-ot tartalmaznak, a végtelen görgetés vagy lapozás javasolt. Az oldalszámozásban szereplő elemek számának meghatározásakor mindenképpen figyelembe kell venni a DOM mérési szempontokat. Az általában figyelembe vett idő az oldalszámozásban szereplő termékek száma 15-20 másodperc, de ezt a részt valójában a frontend érdekelt fél oldalán kell kiszámítani, figyelembe véve a DOM méretét.

Az egyik nagyon egyszerű megoldás, hogy nem adunk hozzá elemeket amelyek nem láthatók az oldalon a HTML számára anélkül, hogy elrejnék őket CSS-sel. Ha egy elemet meg kell jeleníteni, azt később meg kell hívni és meg kell jeleníteni a felhasználónak. Tudnia kell, hogy az elemek CSS-sel való elrejtése megnöveli a DOM-ot.

Források: