Ce metode de optimizare a randării (rearanjare) cunoști?

Optimizarea randării (recalcularea stilurilor și a aspectului) se realizează prin minimizarea sau eliminarea operațiunilor care provoacă Layout (reflow sau recalcularea pozițiilor și dimensiunilor elementelor). Astfel de operațiuni includ:

• Modificări ale proprietăților geometrice: width, height, left, top, margin, padding.
• Modificări ale conținutului: adăugarea/eliminarea de noduri, modificarea textului.
• Modificări ale proprietăților care influențează fluxul documentului: display, float, position.
• Obținerea stilurilor calculate sau a dimensiunilor: element.offsetWidth, getComputedStyle().
• Modificarea dimensiunii ferestrei browserului.

Modalități de optimizare:

1. Evitarea Layout-urilor sincrone forțate: Obțineți informații despre stiluri/layout înainte de a face modificări care pot provoca un Layout, apoi efectuați toate modificările în bloc.
2. Utilizarea transform și opacity: Aceste proprietăți modifică elementul fără a afecta geometria altor elemente, provocând doar Compoziție (Composite) și Vopsire (Paint), dar nu Layout.
3. Aplicarea will-change: Atributul informează browser-ul despre modificările anticipate ale unui element, permițând optimizarea renderizării în avans (de exemplu, mutarea elementului pe un strat GPU separat). Se folosește cu moderație, deoarece poate crește consumul de memorie.
4. Virtualizarea listelor: Se redau doar elementele vizibile în acel moment, reducând semnificativ numărul de elemente din DOM.
5. Eliminarea elementului din flux: Pentru animații complexe care necesită modificări frecvente ale proprietăților geometrice, se poate elimina temporar elementul din fluxul normal al documentului (de exemplu, cu position: absolute sau fixed), se face animația și apoi se reintroduce.
6. Debouncing și throttling pentru evenimente: Limitarea frecvenței de apelare a handler-urilor de evenimente (cum ar fi scroll-ul sau redimensionarea ferestrei), care pot provoca Layout.

// Exemplu de Layout forțat sincronic
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Provocă Layout
element.style.height = (height + 10) + 'px'; // Provocă din nou Layout

// Exemplu optimizat (modificare în lot)
const element = document.getElementById('myElement');
// Obțineți valoarea înainte de modificări
const height = element.offsetHeight; 
// Efectuați toate modificările odată
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Folosiți transform în loc de left/top pentru animații */
.animated-element {
  transform: translateX(100px); /* Provocă Compoziție */
  /* În loc de left: 100px; care provoacă Layout și Paint */
}

/* Aplicarea will-change */
.will-animate {
  will-change: transform, opacity; 
}