Aké spôsoby optimalizácie vykresľovania (režimu) poznáš?

Optimalizácia vykresľovania (prepočítanie štýlov a rozloženia) sa dosahuje minimalizáciou alebo odstránením operácií, ktoré spôsobujú Layout (režiu alebo prepočítanie pozícií a veľkostí prvkov). K týmto operáciám patria:

• Zmena geometrických vlastností: width, height, left, top, margin, padding.
• Zmena obsahu: pridanie/odstránenie uzlov, zmena textu.
• Zmena vlastností ovplyvňujúcich tok dokumentu: display, float, position.
• Získanie vypočítaných štýlov alebo rozmerov: element.offsetWidth, getComputedStyle().
• Zmena veľkosti okna prehliadača.

Spôsoby optimalizácie:

1. Vyhýbať sa synchronným núteným Layoutom: Získavať informácie o štýloch/rozložení pred vykonaním zmien, ktoré môžu spustiť Layout, a potom vykonávať všetky zmeny naraz.
2. Používať transform a opacity: Tieto vlastnosti menia prvok, neovplyvňujúc geometriu iných prvkov, spôsobujú iba Composite (skladanie) a Paint (prekreslenie), ale nie Layout.
3. Používať will-change: Atribút informuje prehliadač o predpokladaných zmenách prvku, čo umožňuje optimalizovať renderovanie vopred (napríklad presunutím prvku na samostatnú GPU vrstvu). Je potrebné používať rozumne, pretože to môže zvýšiť spotrebu pamäte.
4. Virtuálna vizualizácia zoznamov: Renderovať iba prvky zoznamu, ktoré sú aktuálne viditeľné, čím sa výrazne zníži počet prvkov v DOM.
5. Odstránenie prvku z toku: Pre zložité animácie, ktoré vyžadujú časté zmeny geometrických vlastností, je možné dočasne odstrániť prvok z normálneho toku dokumentu (napríklad pomocou position: absolute alebo position: fixed), vykonať animáciu a potom ho vrátiť späť.
6. Debouncing a throttling udalostí: Obmedziť frekvenciu volania spracovateľov udalostí (napríklad posúvania alebo zmeny veľkosti okna), ktoré môžu spôsobovať Layout.

// Príklad synchronného núteného Layoutu
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Vyvolá Layout
element.style.height = (height + 10) + 'px'; // Vyvolá Layout znova

// Optimalizovaný príklad (hromadná zmena)
const element = document.getElementById('myElement');
// Získame hodnotu pred zmenami
const height = element.offsetHeight; 
// Vykonáme všetky zmeny naraz
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Použitie transform namiesto left/top pre animáciu */
.animated-element {
  transform: translateX(100px); /* Vyvolá Composite */
  /* Namiesto left: 100px; čo spôsobuje Layout a Paint */
}

/* Použitie will-change */
.will-animate {
  will-change: transform, opacity; 
}