Kaip diagnozuojate runtime trūkčiojimą, long task ir prastą INP?

Question

IT Interview Practice · Accepted Answer

Runtime trūkčiojimas kyla iš **long task, blokuojančių pagrindinę giją** — vienintelę giją, kuri tvarko JS, layout, paint ir įvestį. Kai užduotis vykdoma per ilgai, įvestis negali būti apdorota, todėl interakcijos jaučiasi užšalusios, o **INP** kyla.

## Pagrindinis modelis: pagrindinė gija

```text
Main thread: [ event handler 180ms ]  input queued... rendered ─▶ INP = time until next paint
             └── a "long task" (>50ms) blocks everything, including responding to the click
```

INP matuoja delsą nuo naudotojo interakcijos iki kito paint. Jis turi tris dalis: **input delay** (pagrindinė gija užimta, kai spaudžiate), **processing time** (jūsų tvarkyklė) ir **presentation delay** (stilius/layout/paint po to).

## Diagnozavimas

- **Performance panelė** (Chrome DevTools): įrašykite interakciją, ieškokite raudonai pažymėtų **Long Task** (>50ms) ir plačių tvarkyklės kadrų.
- **PerformanceObserver**, kad sugautumėte long task lauke:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // find real-user blockers
  }
}).observe({ type: "longtask", buffered: true });
```

## Pataisos

- **Suskaidykite long task** — dalinkite darbą ir užleiskite (yield), kad įvestis galėtų pertraukti:

```js
async function process(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending?.()) await yieldToMain(); // let clicks through
  }
}
const yieldToMain = () => new Promise((r) => setTimeout(r, 0));
```

- **Perkelkite sunkius skaičiavimus į Web Worker** — laikykite analizavimą/skaičiavimą už pagrindinės gijos.
- **Debounce/throttle** brangias tvarkykles; **virtualizuokite** ilgus sąrašus; memoizuokite, kad sumažintumėte perpiešimus.
- **Atidėkite neskubų darbą** su `requestIdleCallback` arba `scheduler.postTask` prioritetais.

## Kodėl tai svarbu

INP yra naujausias Core Web Vital ir sunkiausiai taisomas, nes jis susijęs su *runtime*, o ne įkėlimu. Iš senior tikimasi, kad samprotautų iš vienos gijos modelio — long task blokuoja įvestį — ir griebtųsi yielding, worker ir scheduling, o ne vien „optimizuok kodą“.

Pagrindinis modelis: pagrindinė gija

Diagnozavimas

Pataisos

Kodėl tai svarbu

Susiję klausimai