Layout síncrono forçado: ler geometria após escrever no DOM

O que acontece

Normalmente o layout acontece após o seu JavaScript terminar, uma vez por frame. Mas se você muda o DOM e imediatamente lê uma propriedade de layout — offsetWidth, scrollHeight, getBoundingClientRect(), getComputedStyle() — o navegador precisa parar e calcular o layout ali mesmo, de forma síncrona, dentro da sua tarefa, porque a resposta depende da sua alteração pendente.

Um layout forçado é barato em uma página pequena. Em um DOM grande, ou repetido em um laço (que vira layout thrashing), ele adiciona centenas de milissegundos ao manipulador.

Como reconhecer

• Processing time longo no detalhamento do INP, com blocos de Layout aninhados dentro da tarefa de script no DevTools Performance (aviso “Forced reflow”).
• A Long Animation Frames API relata um forcedStyleAndLayoutDuration grande para o seu script.
• O manipulador ao mesmo tempo altera o DOM e mede elementos.

Como corrigir

• Leia toda a geometria antes da primeira escrita no DOM dentro da tarefa.
• Faça cache das medidas que não mudam (tamanhos de elementos, largura do contêiner) em vez de relê-las a cada evento.
• Se precisar medir após uma mudança, adie a leitura para o requestAnimationFrame do próximo frame, ou use ResizeObserver / IntersectionObserver em vez de consultar a geometria.

Problema

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

Correção

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