Milyen renderelés-optimalizációs (újrarendezés) módszereket ismersz?

A renderelés (stílusok és elrendezés újraszámítása) optimalizálása a műveletek minimalizálásával vagy eltávolításával érhető el, amelyek Layout-ot (reflow vagy elemek pozíciójának és méretének újraszámítása) váltanak ki. Ezek a műveletek a következők:

• Geometriai tulajdonságok módosítása: width, height, left, top, margin, padding.
• Tartalom módosítása: csomópontok hozzáadása/törlése, szöveg módosítása.
• A dokumentum folyamatát befolyásoló tulajdonságok módosítása: display, float, position.
• Számított stílusok vagy méretek lekérdezése: element.offsetWidth, getComputedStyle().
• A böngésző ablak méretének változtatása.

Optimalizálási módszerek:

1. Kerülje a szinkron, kényszerített Layout-okat: Szerezzen információkat a Style/Layout-ról mielőtt olyan változtatásokat végezne, amelyek Layout-ot váltanak ki, majd ezeket a változtatásokat csomagban hajtsa végre.
2. Használja a transform és opacity tulajdonságokat: Ezek a tulajdonságok módosítják az elemet anélkül, hogy befolyásolnák más elemek geometriáját, csak a Kompozíciót (Composite) és a Festést (Paint) váltják ki, de nem a Layout-ot.
3. Alkalmazza a will-change-et: Ez az attribútum tájékoztatja a böngészőt az elvárt változásokról, lehetővé téve az előzetes renderelés-optimalizálást (pl. az elem GPU-s rétegre helyezését). Óvatosan használja, mert növelheti a memóriahasználatot.
4. Lista virtualizálás: Csak a látható elemeket renderelje, jelentősen csökkentve a DOM elemek számát.
5. Elem eltávolítása a folyamából: Komplex animációkhoz, amelyek gyakori geometriai változásokat igényelnek, ideiglenesen eltávolíthatja az elemet a normál dokumentumfolyamból (pl. position: absolute vagy fixed segítségével), elvégezheti az animációt, majd visszahelyezheti.
6. Események debounce és throttling: Korlátozza az eseménykezelők hívásainak gyakoriságát (pl. görgetés vagy ablakméret-változtatás), amelyek Layout-ot váltanak ki.

// Szinkron, kényszerített Layout példája
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Layout-ot vált ki
element.style.height = (height + 10) + 'px'; // Újra Layout-ot vált ki

// Optimalizált példa (csomagolt változtatás)
const element = document.getElementById('myElement');
// Érték lekérése a változtatások előtt
const height = element.offsetHeight; 
// Minden változtatást egyszerre hajtsa végre
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Használjon transform-ot a left/top helyett az animációkhoz */
.animated-element {
  transform: translateX(100px); /* Kompozíciót vált ki */
  /* A left: 100px; helyett, ami Layout és Paint-ot okoz */
}

/* Alkalmazza a will-change-et */
.will-animate {
  will-change: transform, opacity; 
}