Layout thrashing: reflow ripetuti in un frame e come fermarli

Cosa succede

Il browser cerca di ricalcolare il layout una volta per frame. Ma se il tuo codice scrive uno stile, poi legge una proprietà di geometria (offsetWidth, getBoundingClientRect), poi scrive di nuovo — in un ciclo — ogni lettura forza un layout nuovo e sincrono della pagina. Un ciclo su 100 elementi può innescare 100 reflow completi in un frame.

Il costo è proporzionale alla dimensione del DOM, quindi lo stesso codice che va bene su una pagina piccola distrugge l'INP su una pagina con migliaia di nodi.

Come riconoscerlo

• Il presentation delay (lavoro di rendering dopo il gestore) domina la scomposizione dell'INP.
• DevTools Performance mostra molti blocchi Layout viola in un frame, spesso segnalati come “Forced reflow”.
• Il codice alterna letture (offsetTop, clientHeight, getComputedStyle) e scritture (style, classList) dentro un ciclo.

Come risolverlo

• Raggruppa prima tutte le letture, poi tutte le scritture — non alternarle mai in un ciclo.
• Sposta le scritture in requestAnimationFrame così avvengono subito prima del paint successivo.
• Preferisci soluzioni CSS (classi, transforms, flex/grid) al misurare e posizionare elementi in JS.

Problema

items.forEach((el) => {
  el.style.width = base + "px"          // write
  const h = el.offsetHeight             // read → forced reflow, every iteration
  el.style.height = h * 2 + "px"        // write
})

Soluzione

const heights = items.map((el) => el.offsetHeight)  // all reads
requestAnimationFrame(() => {
  items.forEach((el, i) => {                          // all writes
    el.style.width = base + "px"
    el.style.height = heights[i] * 2 + "px"
  })
})