JavaScriptでパフォーマンス計測！performance.mark()メソッドの使い方

JavaScriptでWebアプリケーションのパフォーマンスを計測する際、`performance.mark()`メソッドは非常に便利なツールです。このメソッドを使用することで、コードの特定の地点でマークを設定し、処理時間を正確に計測することができます。

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

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

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

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

// 2つのマーク間の測定結果を取得
const measure = performance.measure('処理時間', 'start', 'end');

// 結果をコンソールに表示
console.log(`処理時間: ${measure.duration}ミリ秒`);

performance.mark()のメリット

1. 高精度な計測が可能

2. ブラウザの開発者ツールと連携可能

3. コードの複数箇所で計測可能

実践的な使用例

// 非同期処理の計測
async function fetchData() {
    performance.mark('fetchStart');
    
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    
    performance.mark('fetchEnd');
    performance.measure('データ取得時間', 'fetchStart', 'fetchEnd');
    
    const measurements = performance.getEntriesByType('measure');
    console.log(measurements);
}

エラー処理とベストプラクティス

マークの設定時は、以下の点に注意が必要です：

try {
    performance.mark('customMark');
} catch (error) {
    console.error('パフォーマンス計測に失敗:', error);
}

パフォーマンスエントリーの管理

不要になったマークは削除することをお勧めします：

// 特定のマークを削除
performance.clearMarks('start');

// すべてのマークを削除
performance.clearMarks();

// 測定結果を削除
performance.clearMeasures();

ブラウザの互換性

`performance.mark()`は、モダンブラウザ（Chrome、Firefox、Safari、Edge）で広くサポートされています。ただし、古いブラウザでは使用できない場合があるため、必要に応じてポリフィルを使用することをお勧めします。

まとめ

`performance.mark()`は、JavaScriptアプリケーションのパフォーマンス計測において強力なツールです。正確な時間計測が必要な場面で、デバッグやパフォーマンス最適化に大いに役立ちます。適切に使用することで、アプリケーションのボトルネックを特定し、パフォーマンスの向上に貢献できます。