パフォーマンス最適化

JavaScript のパフォーマンス最適化は、ユーザーエクスペリエンスと SEO の両方において重要です。

実行頻度の多い処理に気をつける

ページが読み込まれた際に一度しか実行されない処理や、クリックなどのイベントは特に気にする必要は少ないですが、次に挙げるイベントはユーザーの自然な操作によってユーザーが気づかぬうちに頻繁に実行されます。処理の内容によってはパフォーマンスに影響を及ぼすので実装は十分に注意し、代替案やテクニックを使いパフォーマンスを向上させるようにしてください。

• scroll イベント
• resize イベント
• mousemove イベント
• touchmove イベント
• wheel イベント
• setTimeout
• setInterval

イベントの代替となる API を利用する

イベントではなく API を利用することでパフォーマンスを向上させることができます。

• Intersection Observer API
  要素がビューポート内に入ったときを検知でき、scroll イベントでの監視が不要です。
• Resize Observer API
  要素サイズの変化を検知でき、resize や setTimeout での監視が不要です。
• matchMedia API
  メディアクエリの状態変化を検知でき、resize イベントでの監視が不要です。