Layout thrashing: reflow berulang dalam satu frame dan cara menghentikannya

Apa yang terjadi

Browser mencoba menghitung ulang layout sekali per frame. Tapi jika kode Anda menulis sebuah style, lalu membaca properti geometri (offsetWidth, getBoundingClientRect), lalu menulis lagi — dalam loop — setiap pembacaan memaksa layout baru yang sinkron untuk halaman. Loop atas 100 elemen bisa memicu 100 reflow penuh dalam satu frame.

Biayanya sebanding dengan ukuran DOM, jadi kode yang sama yang baik-baik saja di halaman kecil menghancurkan INP di halaman dengan ribuan node.

Cara mengenali

• Presentation delay (kerja rendering setelah handler) mendominasi rincian INP.
• DevTools Performance menampilkan banyak blok Layout ungu dalam satu frame, sering ditandai “Forced reflow”.
• Kode bergantian membaca (offsetTop, clientHeight, getComputedStyle) dan menulis (style, classList) di dalam loop.

Cara memperbaiki

• Kelompokkan semua pembacaan dulu, lalu semua penulisan — jangan pernah menyelinginya dalam loop.
• Pindahkan penulisan ke requestAnimationFrame agar terjadi tepat sebelum paint berikutnya.
• Utamakan solusi CSS (kelas, transforms, flex/grid) daripada mengukur dan memposisikan elemen di JS.

Masalah

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
})

Perbaikan

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"
  })
})