Miten diagnosoit runtime-nykimistä, pitkiä tehtäviä ja huonoa INP:tä?

Question

IT Interview Practice · Accepted Answer

Runtime-nykiminen johtuu **pitkistä tehtävistä, jotka tukkivat pääsäikeen** — sen yhden säikeen, joka käsittelee JS:n, layoutin, maalauksen ja syötteen. Kun tehtävä ajautuu liian pitkäksi, syötettä ei voida käsitellä, joten vuorovaikutukset tuntuvat jäätyneiltä ja **INP** kohoaa.

## Ydinmalli: pääsäie

```text
Pääsäie: [ tapahtuma­käsittelijä 180ms ]  syöte jonossa... renderöity ─▶ INP = aika seuraavaan maalaukseen
         └── "pitkä tehtävä" (>50ms) tukkii kaiken, mukaan lukien klikkaukseen vastaamisen
```

INP mittaa viiveen käyttäjän vuorovaikutuksesta seuraavaan maalaukseen. Sillä on kolme osaa: **syöteviive** (pääsäie kiireinen kun klikkaat), **käsittelyaika** (käsittelijäsi) ja **esitysviive** (tyyli/layout/maalaus jälkeenpäin).

## Diagnosointi

- **Performance-paneeli** (Chrome DevTools): tallenna vuorovaikutus, etsi punaisella merkittyjä **pitkiä tehtäviä** (>50ms) ja leveitä käsittelijäkehyksiä.
- **PerformanceObserver** napataksesi pitkät tehtävät kentällä:

```js
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration); // löydä todellisten käyttäjien tukkijat
  }
}).observe({ type: "longtask", buffered: true });
```

## Korjaukset

- **Pilko pitkät tehtävät** — jaa työ paloihin ja luovuta vuoro, jotta syöte voi keskeyttää:

```js
async function process(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending?.()) await yieldToMain(); // päästä klikkaukset läpi
  }
}
const yieldToMain = () => new Promise((r) => setTimeout(r, 0));
```

- **Siirrä raskas laskenta Web Workeriin** — pidä jäsennys/murskaus pois pääsäikeestä.
- **Debounce/throttle** kalliille käsittelijöille; **virtualisoi** pitkät listat; memoisoi karsiaksesi uudelleenrenderöintejä.
- **Lykkää kiireetön työ** `requestIdleCallback`illa tai `scheduler.postTask`-prioriteeteilla.

## Miksi se on tärkeää

INP on uusin Core Web Vital ja vaikein korjata, koska se koskee *runtimea*, ei latausta. Seniorien odotetaan päättelevän yksisäikeisestä mallista — pitkät tehtävät tukkivat syötteen — ja tarttuvan vuoron luovuttamiseen, workereihin ja aikataulutukseen sen sijaan, että vain "optimoi koodi".

Ydinmalli: pääsäie

Diagnosointi

Korjaukset

Miksi se on tärkeää

Aiheeseen liittyvät kysymykset