Conas a dhiagnóisíonn tú jank ama rite, long tasks, agus INP lag?

Question

IT Interview Practice · Accepted Answer

Tagann jank ama rite ó **long tasks ag bacadh an phríomhshnáithe** — an snáithe aonair a láimhseálann JS, layout, paint, agus ionchur. Nuair a ritheann tasc rófhada, ní féidir ionchur a phróiseáil, mar sin mothaíonn idirghníomhaíochtaí reoite agus ardaíonn **INP**.

## An croí-mhúnla: an príomhshnáithe

```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
```

Tomhaiseann INP an mhoill ó idirghníomhaíocht úsáideora go dtí an chéad phéint eile. Tá trí chuid ann: **moill ionchuir** (príomhshnáithe gnóthach nuair a chliceálann tú), **am próiseála** (do láimhseálaí), agus **moill láithreoireachta** (stíl/layout/paint ina dhiaidh).

## Diagnóisiú

- **Painéal Performance** (Chrome DevTools): taifead idirghníomhaíocht, cuardaigh **Long Tasks** (>50ms) atá bratach-dhearg agus frámaí leathana láimhseálaí.
- **PerformanceObserver** chun long tasks a ghabháil allamuigh:

```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 });
```

## Ceartúcháin

- **Bris suas long tasks** — déan obair a chunkáil agus géill ionas gur féidir le hionchur cur isteach:

```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));
```

- **Bog ríomh trom go Web Worker** — coinnigh parsáil/mionsaothrú den phríomhshnáithe.
- **Debounce/throttle** láimhseálaithe costasacha; **fíorúlaigh** liostaí fada; meamóiscigh chun athrindreálacha a laghdú.
- **Cuir obair neamhphráinneach siar** le tosaíochtaí `requestIdleCallback` nó `scheduler.postTask`.

## Cén fáth a bhfuil sé tábhachtach

Is é INP an Core Web Vital is nuaí agus is deacra a cheartú toisc go mbaineann sé le *am rite*, ní le lódáil. Táthar ag súil go réasúnóidh sinsir ón múnla aon-snáithe — bacann long tasks ionchur — agus go dtéann siad i muinín géilleadh, workers, agus sceidealú seachas díreach "an cód a bharrfheabhsú."

An croí-mhúnla: an príomhshnáithe

Diagnóisiú

Ceartúcháin

Cén fáth a bhfuil sé tábhachtach

Ceisteanna gaolmhara