Layout sincrono forzato: leggere la geometria dopo aver scritto nel DOM

Cosa succede

Normalmente il layout avviene dopo che il tuo JavaScript finisce, una volta per frame. Ma se cambi il DOM e poi leggi immediatamente una proprietà di layout — offsetWidth, scrollHeight, getBoundingClientRect(), getComputedStyle() — il browser deve fermarsi e calcolare il layout proprio lì, in modo sincrono, dentro il tuo task, perché la risposta dipende dalla tua modifica in sospeso.

Un layout forzato è economico su una pagina piccola. Su un DOM grande, o ripetuto in un ciclo (che diventa layout thrashing), aggiunge centinaia di millisecondi al gestore.

Come riconoscerlo

• Processing time lungo nella scomposizione dell'INP, con blocchi Layout annidati dentro il task dello script in DevTools Performance (avviso “Forced reflow”).
• La Long Animation Frames API riporta un forcedStyleAndLayoutDuration elevato per il tuo script.
• Il gestore allo stesso tempo muta il DOM e misura elementi.

Come risolverlo

• Leggi tutta la geometria prima della prima scrittura sul DOM nel task.
• Memorizza nella cache le misure che non cambiano (dimensioni degli elementi, larghezza del contenitore) invece di rileggerle a ogni evento.
• Se devi misurare dopo una modifica, rinvia la lettura al requestAnimationFrame del frame successivo, o usa ResizeObserver / IntersectionObserver invece di interrogare la geometria.

Problema

grid.style.width = next + "px"            // write: layout is now dirty
const rect = cell.getBoundingClientRect()  // read → forced synchronous layout

Soluzione

const rect = cell.getBoundingClientRect()  // read first, layout is clean
grid.style.width = next + "px"             // write after; browser lays out
                                           // once, before the next paint