web-dev-qa-db-ja.com

JavaScriptコードをどのようにパフォーマンステストしますか？

CPUサイクル、メモリ使用量、実行時間など？

追加：コードの実行速度の知覚だけでなく、JavaScriptのパフォーマンスを定量的にテストする方法はありますか？

javascriptperformance
296
danmine

プロファイラーは間違いなく数字を取得する良い方法ですが、私の経験では、ユーザー/クライアントにとって重要なのはパフォーマンスの知覚だけです。たとえば、いくつかのデータを表示するために拡張されたExtアコーディオンと、次にいくつかのネストされたExtグリッドを持つプロジェクトがありました。実際にはすべてが非常に高速にレンダリングされていました。1つの操作に長い時間はかかりませんでした。一度に多くの情報がレンダリングされるため、ユーザーには時間がかかりました。

これを「修正」したのは、より高速なコンポーネントに切り替えることや、何らかの方法を最適化することではなく、最初にデータをレンダリングしてからsetTimeoutでグリッドをレンダリングすることです。そのため、最初に情報が表示され、2秒後にグリッドが表示されます。全体として、そのように処理するのに少し時間がかかりましたが、ユーザーにとっては、知覚されるパフォーマンスが改善されました。

最近では、Chromeプロファイラーやその他のツールは、 console.time() 、 console.profile() 、および performance.now() 。 Chromeは、フレームレートを低下させているもの、ユーザーが待機している場所などを示すタイムラインビューも提供します。

これらすべてのツールのドキュメントを見つけるのは本当に簡単です。そのためのSO回答は必要ありません。 7年後も、元の答えのアドバイスを繰り返しますが、ユーザーが気付かない場所で低速のコードを永久に実行し、ユーザーが気付かない場所で非常に高速なコードを実行すると、彼らは文句を言うでしょう非常に高速なコードでは十分に高速ではありません。または、サーバーAPIへのリクエストに220ミリ秒かかりました。またはそのような何か。重要なのは、プロファイラーを取り出して仕事を探しに行くと見つけられるということですが、それはユーザーが必要とする仕事ではないかもしれません。

293
noah

知覚されるパフォーマンスだけが本当に重要であることに同意します。しかし、時々、私は単に何かを行う方法の方が速いかどうかを知りたいだけです。時には違いは巨大で、知る価値があります。

JavaScriptタイマーを使用できます。しかし、通常、ネイティブChrome（現在FirefoxおよびSafariでも）devToolメソッドconsole.time()およびconsole.timeEnd()を使用すると、より一貫した結果が得られます。

使用例：

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

Results Look like this

アップデート（2016年4月4日）：

Chromeカナリアが最近追加されました ラインレベルのプロファイリング 開発ツールのソースタブでは、各ラインの実行にかかった時間を正確に確認できます！ enter image description here

176
Jose Browne

常に単純な日付オブジェクトによって任意の関数にかかった時間を測定。

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;
90
pramodc84

jsPerf を試してください。これは、コードのスニペットをベンチマークおよび比較するためのオンラインJavaScriptパフォーマンスツールです。いつも使っています。

55
Relax

現在、ほとんどのブラウザはperformance.now()で高解像度のタイミングを実装しています。システムクロックとは独立して動作するため、パフォーマンステストにおいてnew Date()よりも優れています。

使用法

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

参考文献

34
Daniel Imms

JSLitmus は、アドホックJavaScriptベンチマークテストを作成するための軽量ツールです

function expressionとfunction constructorの間のパフォーマンスを調べてみましょう。

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

上記で行ったことは、同じ操作を実行するfunction expressionとfunction constructorを作成することです。結果は次のとおりです。

FireFoxパフォーマンス結果

FireFox Performance Result

IEパフォーマンス結果

IE Performance Result

29
Ramiz Uddin

一部の人々は、特定のプラグインやブラウザを提案しています。私は、それらがその1つのプラットフォームに本当に本当に有用だからではありません。 Firefoxでのテスト実行はIE7に正確に変換されません。サイトの99.999999％が複数のブラウザにアクセスしていると考えると、すべての一般的なプラットフォームでパフォーマンスを確認する必要があります。

私の提案は、これをJSに保持することです。すべてのJSテストをオンにして実行時間を計るベンチマークページを作成します。完全に自動化された状態を維持するために、AJAXで結果を返送することもできます。

その後、すすぎ、異なるプラットフォームで繰り返します。

15
Oli

ブラウザーで小さなテストケースをすばやく実行し、すぐに結果を取得できる小さなツールがあります。

JavaScript速度テスト

コードを試して、テスト済みのブラウザーでどの手法が優れているかを確認できます。

10
DUzun

JavaScriptのパフォーマンス（時間）テストで十分だと思います。 JavaScriptパフォーマンステストはこちら に関する非常に便利な記事を見つけました。

8
jQuery Lover

渡された関数の実行時間を表示する単純な関数は次のとおりです。

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}
6
Bunz

これを使用できます： http://getfirebug.com/js.html 。 JavaScript用のプロファイラーがあります。

6
John Boker

実行時間が最善の尺度であると思います。

3
pdavis

クイックアンサー

JQuery（より具体的にはSizzle）では、 this （お使いのブラウザーでcheckout masterとopen speed/index.html）を使用します。これは benchmark.js を使用します。これは、ライブラリのパフォーマンステストに使用されます。

長答

読者がベンチマーク、ワークロード、プロファイラーの違いを知らない場合は、最初に spec.orgの "readme 1st"セクション でパフォーマンステストの基礎を読んでください。これはシステムのテスト用ですが、この基礎を理解すると、JSパフォーマンステストにも役立ちます。いくつかのハイライト：

ベンチマークとは何ですか？

ベンチマークは「測定または評価の標準」です（WebsterのII辞書）。通常、コンピューターベンチマークは、厳密に定義された一連の操作（ワークロード）を実行し、テストされたコンピューターの実行方法を説明する何らかの形式の結果（メトリック）を返すコンピュータープログラムです。通常、コンピューターベンチマークメトリックは速度を測定します。またはスループット：単位時間あたりに完了したワークロード単位の数。複数のコンピューターで同じコンピューターベンチマークを実行すると、比較を行うことができます。

自分のアプリケーションのベンチマークを行うべきですか？

理想的には、システムの最良の比較テストは、独自のワークロードを使用した独自のアプリケーションです。残念ながら、独自のワークロードで独自のアプリケーションを使用して、さまざまなシステムの信頼性が高く、再現性があり、比較可能な測定の幅広いベースを取得することは、しばしば非現実的です。問題には、適切なテストケースの生成、機密性の懸念、同等の条件の確保の困難さ、時間、お金、またはその他の制約が含まれる場合があります。

自分のアプリケーションではない場合、何ですか？

基準点として標準化されたベンチマークを使用することを検討することもできます。理想的には、標準化されたベンチマークは移植性があり、関心のあるプラットフォームで既に実行されている可能性があります。ただし、結果を検討する前に、アプリケーション/コンピューティングのニーズとベンチマークは測定中です。ベンチマークは、実行するアプリケーションの種類に似ていますか？ワークロードには同様の特性がありますか？これらの質問に対する回答に基づいて、ベンチマークが現実にどのように近似するかを確認できます。

注：標準化されたベンチマークは、参照ポイントとして機能します。それでも、ベンダーまたは製品の選択を行っているとき、SPECは、標準化されたベンチマークが実際のアプリケーションのベンチマークを置き換えることができると主張していません。

JSのパフォーマンステスト

理想的には、最適なパフォーマンステストは、さまざまなライブラリ、マシンなど、テストする必要があるものを切り替える独自のワークロードで独自のアプリケーションを使用することです。

これが実行可能でない場合（および通常は実行不可能です）。最初の重要なステップ：ワークロードを定義します。アプリケーションのワークロードを反映する必要があります。 この話 では、Vyacheslav Egorovが避けるべきくだらないワークロードについて話しています。

次に、benchmark.jsのようなツールを使用して、通常は速度またはスループットのメトリックを収集します。 Sizzleでは、修正または変更がライブラリのシステムパフォーマンスにどのように影響するかを比較したいと考えています。

何かが非常に悪い場合、次のステップはボトルネックを探すことです。

ボトルネックを見つけるにはどうすればよいですか？プロファイラー

javascript実行のプロファイルを作成する最良の方法は何ですか？

3
Rafael Xavier

Firebugで console.profile を使用できます

2
Willem de Wit

X Profiler ユーザーの観点からこの問題にアプローチします。何らかのユーザーアクション（クリック）によって引き起こされるすべてのブラウザーイベント、ネットワークアクティビティなどをグループ化し、待ち時間、タイムアウトなどのすべての側面を考慮します。

1
Konstantin Triger

これが時間パフォーマンスのための再利用可能なクラスです。コードに例が含まれています。

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output
1
Shawn Dotey

私は通常、JavaScriptのパフォーマンス、スクリプトの実行時間をテストするだけです。 jQuery Loverはテスト用の優れた記事リンク javascript code performance を提供しましたが、この記事はjavascriptコードの実行時間をテストする方法のみを示しています。また、「 jQueryコードの改善に関する5つのヒント を使用して巨大なデータセットを操作する」という記事を読むことをお勧めします。

1
Uzbekjon

黄金律は、どんな状況でもユーザーのブラウザーをロックしないことです。その後、通常は実行時間を確認し、続いてメモリ使用量を確認します（何かおかしなことをしている場合を除き、その場合は優先度が高くなる可能性があります）。

0
William Keller

これは、特定の操作のパフォーマンス情報を収集する良い方法です。

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);
0
user2601995