@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

console.time

パフォーマンス計測に使えるJavaScript組み込みの関数です。 ブラウザでもNode.jsでも使える便利な子です。

developer.mozilla.org

基本はconsole.timeconsole.timeEndをセットで使います。

console.time('ほげほげ処理に掛かる時間を測るぞい!')

// なんか、ほげほげする処理

console.timeEnd('ほげほげ処理に掛かる時間を測るぞい!')

とすると、次のような文字列がブラウザなら開発コンソールに、Node.jsなら標準出力に出力されます。

ほげほげ処理に掛かる時間を測るぞい!: 4.600s

タイマーは引数で与えた名前で区別されます。 同じ名前のタイマーを2つ同時に起動できません。

ループ処理みたいな途中経過を測りたい時はconsole.timeLogを使います。

console.time('繰り返し処理に掛かった時間')

 for(let i = 0; i < 10; i++){
  console.timeLog('繰り返し処理に掛かった時間')
}

console.timeEnd('繰り返し処理に掛かった時間')

を実行すると次のような結果が得られます。

繰り返し処理に掛かった時間: 3.488ms
繰り返し処理に掛かった時間: 3.569ms
繰り返し処理に掛かった時間: 3.615ms
繰り返し処理に掛かった時間: 3.648ms
繰り返し処理に掛かった時間: 3.687ms
繰り返し処理に掛かった時間: 3.738ms
繰り返し処理に掛かった時間: 3.77ms
繰り返し処理に掛かった時間: 3.81ms
繰り返し処理に掛かった時間: 3.847ms
繰り返し処理に掛かった時間: 3.881ms
繰り返し処理に掛かった時間: 17.205ms

表示される時間は、タイマー開始からの経過時間です。 MDNには書いてないのですがwhatwgの仕様を見ると、timeLogは第二引数以降の引数が取れるみたいです。

console.time('繰り返し処理に掛かった時間')

 for(let i = 0; i < 10; i++){
  console.timeLog('繰り返し処理に掛かった時間', i)
}

console.timeEnd('繰り返し処理に掛かった時間')

で、次のような出力が得られます。

繰り返し処理に掛かった時間: 3.672ms 0
繰り返し処理に掛かった時間: 3.761ms 1
繰り返し処理に掛かった時間: 3.807ms 2
繰り返し処理に掛かった時間: 3.842ms 3
繰り返し処理に掛かった時間: 3.883ms 4
繰り返し処理に掛かった時間: 3.919ms 5
繰り返し処理に掛かった時間: 3.96ms 6
繰り返し処理に掛かった時間: 3.981ms 7
繰り返し処理に掛かった時間: 4.02ms 8
繰り返し処理に掛かった時間: 4.054ms 9
繰り返し処理に掛かった時間: 5.245ms