実行時のジャンク、long task、貧弱なINPをどう診断しますか？

Question

IT Interview Practice · Accepted Answer

実行時のジャンクは、**メインスレッドをブロックするlong task**から生じます。メインスレッドは、JS、レイアウト、ペイント、入力を処理する単一のスレッドです。タスクが長すぎると入力を処理できず、インタラクションが固まったように感じられ、**INP** が上昇します。

## 核心のモデル: メインスレッド

```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は、ユーザーのインタラクションから次の描画までの遅延を測定します。3つの部分があります。**入力遅延**（クリック時にメインスレッドが多忙）、**処理時間**（あなたのハンドラ）、そして**表示遅延**（その後のスタイル/レイアウト/ペイント）です。

## 診断

- **Performanceパネル**（Chrome DevTools）: インタラクションを記録し、赤くフラグされた **Long Task**（>50ms）と幅広いハンドラフレームを探します。
- **PerformanceObserver** でフィールドのlong taskを捕捉します:

```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 taskを分割する** — 作業をチャンク化して譲り（yield）、入力が割り込めるようにします:

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

- **重い計算をWeb Workerに移す** — パースや演算をメインスレッドから外します。
- 高コストなハンドラを**デバウンス/スロットル**し、長いリストを**仮想化**し、メモ化して再描画を減らします。
- **緊急でない作業を後回しにする** — `requestIdleCallback` や `scheduler.postTask` の優先度を使います。

## なぜ重要なのか

INPは最も新しいCore Web Vitalであり、最も修正が難しいものです。読み込みではなく*実行時*に関するものだからです。シニアには、単一スレッドのモデル — long taskが入力をブロックする — から推論し、単に「コードを最適化する」のではなく、yield、worker、スケジューリングに手を伸ばすことが期待されます。

核心のモデル: メインスレッド

診断

修正

なぜ重要なのか

関連する質問