パフォーマンス向上！JavaScriptで処理速度を計測する方法

2024-04-05

console.time()とconsole.timeEnd()を使う

これは、JavaScriptで実行時間を測定する最も簡単な方法です。

console.time('myFunction');
myFunction();
console.timeEnd('myFunction');

このコードは、myFunctionの実行時間をコンソールに出力します。

Dateオブジェクトを使って、関数の実行前と実行後の時間差を計算することができます。

const startTime = new Date().getTime();
myFunction();
const endTime = new Date().getTime();
const executionTime = endTime - startTime;

console.log(`実行時間: ${executionTime}ms`);

パフォーマンスAPIを使う

ブラウザのパフォーマンスAPIを使って、より詳細な実行時間情報を取得することができます。

const startTime = performance.now();
myFunction();
const endTime = performance.now();
const executionTime = endTime - startTime;

console.log(`実行時間: ${executionTime}ms`);

上記以外にも、以下の方法で実行時間を測定することができます。

どの方法を使うべきかは、状況によって異なります。簡単なテストであれば、console.time()とconsole.timeEnd()を使うのが最も簡単です。より詳細な情報が必要であれば、パフォーマンスAPIを使うか、ライブラリやプロファイラを使うことを検討してください。

注意点

実行時間を測定する方法は、ブラウザや環境によって異なる場合があります。
実行時間を測定するコードは、測定したいコードの実行時間に影響を与える可能性があります。

JavaScriptで関数の実行時間を測定するには、いくつかの方法があります。どの方法を使うべきかは、状況によって異なります。

function myFunction(n) {
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += i;
  }
  return result;
}

console.time('myFunction');
const result = myFunction(1000000);
console.timeEnd('myFunction');

console.log(`実行時間: ${result}ms`);

このコードは、1から100万までの合計値を計算するmyFunctionの実行時間を測定します。

以下のリンクから、JavaScriptで実行時間を測定する方法に関するその他のサンプルコードを見つけることができます。

JavaScriptで関数の実行時間を測定するその他の方法

const startTime = new Date().getTime();
myFunction();
const endTime = new Date().getTime();
const executionTime = endTime - startTime;

console.log(`実行時間: ${executionTime}ms`);

パフォーマンスAPIを使う

const startTime = performance.now();
myFunction();
const endTime = performance.now();
const executionTime = endTime - startTime;

console.log(`実行時間: ${executionTime}ms`);

ライブラリを使う

Google Closure Libraryなど、実行時間を測定するためのライブラリがあります。

// Closure Library を読み込む
google.load('closure', '1');

// 実行時間を測定する
var startTime = goog.now();
myFunction();
var endTime = goog.now();

// 実行時間を出力する
console.log('実行時間: ' + (endTime - startTime) + 'ms');