js処理にかかってる時間を計測する

こんな便利なのあるんだってメモ。

いいか、performanceメソッドを使うんだ

こんな感じ

performance.mark('mark-stark'); // 計測開始位置にマークをつける
setTimeout(() => {
  performance.mark('mark-end'); // 計測終了位置にマークをつける
  performance.measure('mark-diff', 'mark-stark', 'mark-end'); // 差分算出
  console.log(performance.getEntriesByType('mark')); // 各マークの情報一覧
  console.log(performance.getEntriesByType('measure')); // 各差分の情報一覧
}, 5000);

出力結果

２つめのconsole.logのdurationをみたら、かかった時間は5004msだよって分かりますね。

簡単な使い方

上のサンプルでなんとなく理解してもらえると思うけど一応。

1. 計測したい箇所の開始と終わりにperformance.markでマークをつける。
2. performance.measureで差分算出

1. 計測したい箇所の開始と終わりにperformance.markでマークをつける。

引数の文字列は、そのマークの名前なのでなんでもいいです。
わかりやすい名前をつけてあげましょう。

2. performance.measureで差分算出

こちらも引数の文字列は差分情報の名前です。
わかりやすい名前をつけてあげましょう。

以上

簡単でしたね。
これ使って速度改善頑張ろうな