Runtime jank'i, uzun görevleri (long task) ve zayıf INP'yi nasıl teşhis edersiniz?

Question

IT Interview Practice · Accepted Answer

Runtime jank, **ana thread'i bloklayan uzun görevlerden** gelir — JS'yi, layout'u, paint'i ve girdiyi (input) işleyen tek thread. Bir görev çok uzun çalıştığında, girdi işlenemez, dolayısıyla etkileşimler donmuş hissettirir ve **INP** yükselir.

## Çekirdek model: ana thread

```text
Ana thread: [ olay işleyici 180ms ]  girdi kuyrukta... render edildi ─▶ INP = sonraki boyamaya kadar geçen süre
            └── bir "uzun görev" (>50ms) tıklamaya yanıt vermek dâhil her şeyi bloklar
```

INP, bir kullanıcı etkileşiminden sonraki boyamaya kadar olan gecikmeyi ölçer. Üç parçası vardır: **girdi gecikmesi** (tıkladığınızda ana thread meşgul), **işleme süresi** (işleyiciniz) ve **sunum gecikmesi** (sonrasındaki style/layout/paint).

## Teşhis

- **Performance paneli** (Chrome DevTools): bir etkileşimi kaydedin, kırmızı işaretli **Long Task**'leri (>50ms) ve geniş işleyici karelerini arayın.
- Uzun görevleri alanda yakalamak için **PerformanceObserver**:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // gerçek-kullanıcı bloklayıcılarını bul
  }
}).observe({ type: "longtask", buffered: true });
```

## Düzeltmeler

- **Uzun görevleri parçalara ayırın** — işi bölün ve girdinin araya girebilmesi için thread'i teslim edin (yield):

```js
async function process(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending?.()) await yieldToMain(); // tıklamaların geçmesine izin ver
  }
}
const yieldToMain = () => new Promise((r) => setTimeout(r, 0));
```

- **Ağır hesaplamayı bir Web Worker'a taşıyın** — ayrıştırma/işlemeyi ana thread'in dışında tutun.
- Pahalı işleyicileri **debounce/throttle** edin; uzun listeleri **sanallaştırın** (virtualize); yeniden render'ları kesmek için memoize edin.
- **Acil olmayan işi erteleyin** — `requestIdleCallback` veya `scheduler.postTask` öncelikleriyle.

## Neden önemli

INP en yeni Core Web Vital'dir ve düzeltmesi en zorudur çünkü yükleme değil *runtime* ile ilgilidir. Senior'lardan tek-thread'li modelden akıl yürütmeleri — uzun görevler girdiyi bloklar — ve sadece "kodu optimize et" yerine yield etmeye, worker'lara ve zamanlamaya (scheduling) yönelmeleri beklenir.

Çekirdek model: ana thread

Teşhis

Düzeltmeler

Neden önemli

İlgili sorular