Event handler yang berat: mengapa klik butuh 500 ms dan cara memperbaikinya

Apa yang terjadi

Saat pengguna mengklik, browser menjalankan event handler Anda sampai selesai sebelum dapat melukis frame berikutnya. Jika handler melakukan ratusan milidetik kerja sinkron — memfilter array besar, membangun DOM, mem-parsing JSON — halaman membeku persis selama itu. Pengguna tidak melihat apa pun sampai handler kembali.

Ini adalah masalah INP paling umum dan muncul dalam rincian INP sebagai fase processing time yang panjang.

Cara mengenali

• Processing time mendominasi rincian INP (input delay dan presentation delay kecil).
• Di DevTools Performance, satu tugas panjang dimulai tepat pada event dan diatribusikan ke fungsi handler Anda.
• Kelambatan meningkat seiring ukuran data: semakin banyak baris/item, semakin buruk rasa kliknya.

Cara memperbaiki

• Perbarui UI dulu (status ditekan, spinner), lalu serahkan kendali ke browser dengan scheduler.yield() (atau setTimeout(0) sebagai fallback) sebelum melakukan kerja berat.
• Pecah loop besar menjadi potongan, menyerahkan kendali di antara potongan agar browser bisa melukis.
• Pindahkan komputasi murni (parsing, filtering, diffing) ke Web Worker — main thread hanya mengirim input dan menerima hasil.

Masalah

button.addEventListener("click", () => {
  const results = filterRows(allRows)   // 400 ms of sync work
  renderTable(results)                  // user saw nothing until now
})

Perbaikan

button.addEventListener("click", async () => {
  button.classList.add("loading")       // instant feedback, painted first
  await scheduler.yield()               // let the browser paint
  const results = filterRows(allRows)
  renderTable(results)
  button.classList.remove("loading")
})