Quali metodi di ottimizzazione del rendering (reflow) conosci?

L'ottimizzazione del rendering (ricalcolo di stili e layout) si ottiene minimizzando o eliminando operazioni che causano Layout (reflow o ricalcolo di posizioni e dimensioni degli elementi). Queste operazioni includono:

• Modifiche alle proprietà geometriche: width, height, left, top, margin, padding.
• Modifiche al contenuto: aggiunta/rimozione di nodi, modifica del testo.
• Modifiche alle proprietà che influenzano il flusso del documento: display, float, position.
• Ottenere stili calcolati o dimensioni: element.offsetWidth, getComputedStyle().
• Modifiche alle dimensioni della finestra del browser.

Metodi di ottimizzazione:

1. Evitare Layout sincronici forzati: Ottenere informazioni di Style/Layout prima di apportare modifiche che potrebbero provocare un Layout, e poi eseguire tutte le modifiche in blocco.
2. Usare transform e opacity: Queste proprietà modificano l'elemento senza influenzare la geometria degli altri elementi, provocando solo Compositing (Composite) e Paint (Paint), ma non Layout.
3. Applicare will-change: L'attributo informa il browser sui cambiamenti previsti di un elemento, permettendo di ottimizzare il rendering in anticipo (ad esempio, spostando l'elemento su un livello GPU separato). Da usare con moderazione, poiché può aumentare il consumo di memoria.
4. Virtualizzazione delle liste: Renderizzare solo gli elementi visibili in quel momento, riducendo significativamente il numero di elementi nel DOM.
5. Rimuovere l'elemento dal flusso: Per animazioni complesse che richiedono frequenti cambiamenti di proprietà geometriche, si può temporaneamente rimuovere l'elemento dal flusso normale del documento (ad esempio, con position: absolute o fixed), eseguire l'animazione e poi reinserirlo.
6. Debouncing e throttling degli eventi: Limitare la frequenza di chiamata degli handler di eventi (come lo scroll o il resize della finestra), che possono provocare Layout.

// Esempio di Layout forzato sincrono
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Provoca Layout
element.style.height = (height + 10) + 'px'; // Provoca Layout di nuovo

// Esempio ottimizzato (modifica in blocco)
const element = document.getElementById('myElement');
// Ottenere il valore prima delle modifiche
const height = element.offsetHeight; 
// Eseguire tutte le modifiche in una volta
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Usare transform invece di left/top per le animazioni */
.animated-element {
  transform: translateX(100px); /* Provoca Compositing */
  /* Invece di left: 100px; che provoca Layout e Paint */
}

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