Πώς διαγιγνώσκετε runtime jank, long tasks και κακό INP;

Question

IT Interview Practice · Accepted Answer

Το runtime jank προέρχεται από **long tasks που μπλοκάρουν το main thread** — το μοναδικό thread που χειρίζεται JS, layout, paint και input. Όταν μια εργασία τρέχει πολύ ώρα, το input δεν μπορεί να επεξεργαστεί, οπότε οι αλληλεπιδράσεις νιώθουν παγωμένες και το **INP** ανεβαίνει.

## Το βασικό μοντέλο: το main thread

```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 μετρά την καθυστέρηση από μια αλληλεπίδραση χρήστη μέχρι το επόμενο paint. Έχει τρία μέρη: **input delay** (το main thread είναι απασχολημένο όταν κάνετε click), **processing time** (ο handler σας) και **presentation delay** (style/layout/paint μετά).

## Διάγνωση

- **Performance panel** (Chrome DevTools): καταγράψτε μια αλληλεπίδραση, ψάξτε για επισημασμένα **Long Tasks** (>50ms) και φαρδιά frames handler.
- **PerformanceObserver** για να πιάνετε long tasks στο πεδίο:

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

## Διορθώσεις

- **Σπάστε τα long tasks** — κόψτε την εργασία σε κομμάτια και κάντε yield ώστε το input να μπορεί να διακόψει:

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

- **Μετακινήστε βαρύ compute σε ένα Web Worker** — κρατήστε το parsing/crunching εκτός του main thread.
- **Debounce/throttle** τους ακριβούς handlers· **virtualize** τις μεγάλες λίστες· memoize για να κόψετε τα re-renders.
- **Αναβάλετε τη μη επείγουσα εργασία** με `requestIdleCallback` ή προτεραιότητες `scheduler.postTask`.

## Γιατί έχει σημασία

Το INP είναι το νεότερο Core Web Vital και το πιο δύσκολο στη διόρθωση επειδή αφορά το *runtime*, όχι τη φόρτωση. Από τους senior αναμένεται να συλλογίζονται από το single-threaded μοντέλο — τα long tasks μπλοκάρουν το input — και να καταφεύγουν σε yielding, workers και scheduling αντί απλώς σε "βελτιστοποίησε τον κώδικα."

Το βασικό μοντέλο: το main thread

Διάγνωση

Διορθώσεις

Γιατί έχει σημασία

Σχετικές ερωτήσεις