JavaScriptのINPへの影響 — メインスレッド最適化

JavaScriptがINPに与える影響

JavaScriptはINPスコア不良の主な原因です。メインスレッドがJavaScriptの実行に費やすすべてのミリ秒は、ユーザー入力に応答できないミリ秒です。

メインスレッドのボトルネック

ブラウザのメインスレッドは以下を処理します：

• JavaScript実行
• スタイル計算
• レイアウト
• ペイント
• ユーザー入力イベント処理

これらすべてが単一のスレッドを共有しています。

長いタスクとINP

「長いタスク」とは50msを超えるタスクです。長いタスク中、ブラウザはユーザー入力に完全に応答できません。

最適化パターン

パターン1：作業間の譲渡

async function handleFilter(criteria) {
  const data = getFilteredData(criteria);
  await scheduler.yield();
  renderResults(data);
  await scheduler.yield();
  updateAnalytics(criteria);
}

パターン2：メインスレッド外への作業移動

const worker = new Worker('/sort-worker.js');
worker.postMessage({ data: largeArray, sortKey: 'name' });
worker.onmessage = (e) => renderSorted(e.data);

パターン3：Reactの再レンダリング最適化

const ExpensiveList = React.memo(({ items }) => {
  const sorted = useMemo(() => sortItems(items), [items]);
  return sorted.map(item => <Item key={item.id} {...item} />);
});