JavaScriptのperformance.measure()メソッドは、アプリケーションのパフォーマンスを計測するための便利なツールです。このメソッドを使用することで、特定の処理にかかる時間を正確に測定できます。

performance.measure()の基本的な使い方

// 開始地点をマーク
performance.mark('start');

// 計測したい処理
for(let i = 0; i < 1000000; i++) {
  // 何かしらの処理
}

// 終了地点をマーク
performance.mark('end');

// 計測結果を記録
performance.measure('処理時間', 'start', 'end');

計測結果は`performance.getEntriesByName()`メソッドで取得できます：

const measurements = performance.getEntriesByName('処理時間');
console.log(measurements[0].duration); // ミリ秒単位で表示

実践的な使用例

APIリクエストの所要時間を計測する例：

async function measureAPICall() {
  performance.mark('api-start');
  
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  
  performance.mark('api-end');
  performance.measure('API呼び出し時間', 'api-start', 'api-end');
  
  const result = performance.getEntriesByName('API呼び出し時間')[0];
  console.log(`API呼び出しにかかった時間: ${result.duration}ms`);
}

注意点とベストプラクティス

1. マーク名の重複を避ける

// 既存のマークをクリア
performance.clearMarks();

2. 計測結果のクリーンアップ

// 特定の計測結果をクリア
performance.clearMeasures('処理時間');

3. エラーハンドリング

try {
  performance.measure('処理時間', 'start', 'end');
} catch (e) {
  console.error('計測に失敗しました:', e.message);
}

ブラウザ対応状況

performance.measure()は、モダンブラウザで広くサポートされています：

  • Chrome 43以降
  • Firefox 41以降
  • Safari 11以降
  • Edge 12以降

まとめ

performance.measure()は、JavaScriptアプリケーションのパフォーマンス計測に欠かせないツールです。特に以下の場面で活用できます：

  • 重い処理の実行時間測定
  • APIリクエストの所要時間確認
  • アプリケーションのボトルネック特定

適切に使用することで、アプリケーションのパフォーマンス最適化に役立つ重要なデータを得ることができます。

関連キーワード：

JavaScript、パフォーマンス計測、performance API、Web開発、フロントエンド最適化