Ağır olay işleyici: bir tıklama neden 500 ms sürer ve nasıl düzeltilir

Ne oluyor

Bir kullanıcı tıkladığında, tarayıcı bir sonraki kareyi çizebilmeden önce olay işleyicinizi sonuna kadar çalıştırır. İşleyici yüzlerce milisaniyelik senkron iş yaparsa — büyük bir diziyi filtrelemek, DOM oluşturmak, JSON ayrıştırmak — sayfa tam o kadar süre donar. İşleyici geri dönene kadar kullanıcı hiçbir şeyin olmadığını görür.

Bu en yaygın INP sorunudur ve INP dökümünde uzun bir processing time aşaması olarak görünür.

Nasıl tanınır

INP dökümünde processing time baskındır (input delay ve presentation delay küçüktür).
DevTools Performance'ta uzun bir görev tam olayda başlar ve işleyici fonksiyonunuza atfedilir.
Yavaşlık veri boyutuyla büyür: ne kadar çok satır/öğe olursa tıklama o kadar kötü hissettirir.

Nasıl düzeltilir

Önce arayüzü güncelle (basılı durum, spinner), sonra ağır işten önce scheduler.yield() (veya yedek olarak setTimeout(0)) ile tarayıcıya devret.
Büyük döngüleri parçalara böl, parçalar arasında devrederek tarayıcının boyamasına izin ver.
Saf hesaplamayı (ayrıştırma, filtreleme, diffing) bir Web Worker'a taşı — ana iş parçacığı yalnızca girdiyi gönderir ve sonucu alır.

Sorun

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

Çözüm

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

Sitenizi ücretsiz tarayın →