Jak diagnozować runtime jank, długie zadania i słabe INP?

Question

IT Interview Practice · Accepted Answer

Runtime jank bierze się z **długich zadań blokujących główny wątek** — jedynego wątku, który obsługuje JS, układ, malowanie i wejście. Gdy zadanie działa zbyt długo, wejście nie może zostać przetworzone, więc interakcje wydają się zamrożone, a **INP** rośnie.

## Rdzenny model: główny wątek

```text
Główny wątek: [ handler zdarzenia 180ms ]  wejście w kolejce... wyrenderowane ─▶ INP = czas do następnego malowania
              └── "długie zadanie" (>50ms) blokuje wszystko, w tym reakcję na kliknięcie
```

INP mierzy opóźnienie od interakcji użytkownika do następnego malowania. Ma trzy części: **opóźnienie wejścia** (główny wątek zajęty, gdy klikasz), **czas przetwarzania** (twój handler) i **opóźnienie prezentacji** (styl/układ/malowanie po).

## Diagnozowanie

- **Panel Performance** (Chrome DevTools): nagraj interakcję, poszukaj oznaczonych na czerwono **długich zadań** (>50ms) i szerokich ramek handlerów.
- **PerformanceObserver** do wychwytywania długich zadań w terenie:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // znajdź rzeczywiste blokady użytkowników
  }
}).observe({ type: "longtask", buffered: true });
```

## Poprawki

- **Rozbijaj długie zadania** — dziel pracę na kawałki i ustępuj (yield), aby wejście mogło przerwać:

```js
async function process(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending?.()) await yieldToMain(); // przepuść kliknięcia
  }
}
const yieldToMain = () => new Promise((r) => setTimeout(r, 0));
```

- **Przenieś ciężkie obliczenia do Web Workera** — trzymaj parsowanie/przeliczanie poza głównym wątkiem.
- **Debounce/throttle** kosztownych handlerów; **wirtualizuj** długie listy; memoizuj, aby ograniczyć re-rendery.
- **Odraczaj niepilną pracę** za pomocą `requestIdleCallback` lub priorytetów `scheduler.postTask`.

## Dlaczego to ważne

INP to najnowszy Core Web Vital i najtrudniejszy do naprawienia, bo dotyczy *runtime'u*, nie ładowania. Od seniorów oczekuje się rozumowania od modelu jednowątkowego — długie zadania blokują wejście — i sięgania po ustępowanie (yielding), workery i szeregowanie zamiast po prostu "zoptymalizuj kod".

Rdzenny model: główny wątek

Diagnozowanie

Poprawki

Dlaczego to ważne

Powiązane pytania