console.time でパフォーマンス計測｜JavaScript

処理にどれくらい時間がかかっているかを知りたいとき、console.time と console.timeEnd が役立ちます。パフォーマンス改善の第一歩は計測からです。

基本的な使い方

console.time でタイマーを開始し、console.timeEnd で停止と結果表示を行います。

console.time('処理時間');

let sum = 0;
for (let i = 0; i &lt; 1000000; i++) {
  sum += i;
}

console.timeEnd('処理時間');
// 処理時間: 5.123ms

ラベル（この例では「処理時間」）で開始と終了を対応付けます。

複数のタイマーを同時に使う

ラベルを変えれば、複数の計測を並行して行えます。

console.time('全体');
console.time('処理A');

doProcessA();
console.timeEnd('処理A');
// 処理A: 3.456ms

console.time('処理B');
doProcessB();
console.timeEnd('処理B');
// 処理B: 7.891ms

console.timeEnd('全体');
// 全体: 11.567ms

どの処理がボトルネックになっているかを特定できます。

console.timeLog で途中経過を見る

処理の途中でも経過時間を確認できます。

console.time('長い処理');

doStepOne();
console.timeLog('長い処理', 'ステップ1完了');
// 長い処理: 2.345ms ステップ1完了

doStepTwo();
console.timeLog('長い処理', 'ステップ2完了');
// 長い処理: 5.678ms ステップ2完了

doStepThree();
console.timeEnd('長い処理');
// 長い処理: 9.012ms

timeLog はタイマーを止めずに経過時間だけを出力します。第 2 引数以降にメッセージを追加できます。

非同期処理の計測

async/await と組み合わせて非同期処理の時間も計測できます。

console.time('API呼び出し');

const response = await fetch('/api/users');
const data = await response.json();

console.timeEnd('API呼び出し');
// API呼び出し: 234.567ms

ネットワーク遅延を含めた実際の待ち時間がわかります。

繰り返し処理の比較

異なるアルゴリズムのパフォーマンスを比較するのにも使えます。

const arr = Array.from({ length: 100000 }, (_, i) => i);

console.time('for文');
let sum1 = 0;
for (let i = 0; i &lt; arr.length; i++) {
  sum1 += arr[i];
}
console.timeEnd('for文');

console.time('reduce');
const sum2 = arr.reduce((a, b) => a + b, 0);
console.timeEnd('reduce');

console.time('forEach');
let sum3 = 0;
arr.forEach(n => { sum3 += n; });
console.timeEnd('forEach');

このような計測を行うと、環境によって最適な方法が異なることがわかります。

performance.now() との違い

より精密な計測が必要な場合は performance.now() を使う方法もあります。

const start = performance.now();

doHeavyTask();

const end = performance.now();
console.log(`処理時間: ${end - start}ms`);

console.time

手軽に使える。ラベルで管理できる。結果は自動でコンソールに出力される。

performance.now()

高精度（マイクロ秒単位）。値を変数に保持して計算できる。ベンチマークに向いている。

実践例：ボトルネックの特定

複雑な処理のどこに時間がかかっているかを調べるパターンです。

async function processData(items) {
  console.time('全体');
  
  console.time('データ取得');
  const data = await fetchAllData(items);
  console.timeEnd('データ取得');
  
  console.time('変換処理');
  const transformed = transform(data);
  console.timeEnd('変換処理');
  
  console.time('保存処理');
  await saveResults(transformed);
  console.timeEnd('保存処理');
  
  console.timeEnd('全体');
}

これで各ステップの所要時間が明確になり、最適化すべき箇所が見えてきます。

注意点

console.time は開発中のデバッグ用です。本番環境にログが残ると、ユーザーの環境でも表示されてしまいます。本格的なパフォーマンス監視には専用のツールやライブラリを検討しましょう。