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

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

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

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

これを「修正」するには、より高速なコンポーネントに切り替えるか、メソッドを最適化するのではなく、まずデータをレンダリングしてから、setTimeoutを使用してグリッドをレンダリングします。したがって、最初に情報が表示され、次にグリッドが2番目に表示されます。全体的に、この方法で処理するために少し多くの処理時間がかかりましたが、ユーザーにとって、認識されるパフォーマンスは向上しました。

これらの日、クロームプロファイラやその他のツールが普遍的に利用可能と使いやすい、などありconsole.time()、console.profile()とperformance.now()。Chromeではタイムラインビューも表示されるため、フレームレートを低下させている原因や、ユーザーが待機している可能性がある場所などを確認できます。

これらすべてのツールのドキュメントを見つけるのはとても簡単です。そのためのSOの答えは必要ありません。7年後も、元の回答のアドバイスを繰り返します。ユーザーが気付かないところではコードが永久に実行され、ユーザーが実行するコードはかなり高速に実行される可能性があることを指摘します。かなり速いコードは十分に速くありません。または、サーバーAPIへのリクエストに220ミリ秒かかりました。またはそのような何か。重要な点は、プロファイラーを取り出して、やるべき作業を探しに行くと、それを見つけることができるということですが、ユーザーが必要とする作業ではない可能性があります。

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

あなただけの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')

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

Chromeカナリアは最近、ラインレベルプロファイリングの[開発ツールソース]タブを追加しました。これにより、各ラインの実行にかかった正確な時間を確認できます。

単純な日付オブジェクトを使用して、任意の関数が費やした時間を常に測定できます。

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

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

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

使用法

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

参考文献

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now（）
• http://www.w3.org/TR/hr-time/#dom-performance-now

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パフォーマンス結果

IEのパフォーマンス結果

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

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

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

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

JavaScript速度テスト

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

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

次に、渡された関数の実行時間を表示する単純な関数を示します。

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

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

素早い回答

jQuery（より具体的にはSizzle）では、これを使用し（チェックアウトマスターとブラウザーでspeed / index.htmlを開きます）、これはbenchmark.jsを使用します。これは、ライブラリのパフォーマンステストに使用されます。

長い答え

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

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

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

自分のアプリケーションをベンチマークする必要がありますか？

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

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

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

注：標準化されたベンチマークは、参照ポイントとして役立ちます。それにもかかわらず、ベンダーまたは製品の選択を行っている場合、SPECは、標準化されたベンチマークが実際のアプリケーションのベンチマークに取って代わることができるとは主張していません。

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

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

これが実現可能でない場合（そして通常は不可能です）。最初の重要なステップ：ワークロードを定義します。アプリケーションのワークロードを反映する必要があります。で、この話、ヴャチェスラフEgorovはあなたが避けなければならないくだらないワークロードについて語っています。

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

パフォーマンスが本当に悪い場合、次のステップはボトルネックを探すことです。

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

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

実行時間は最善の方法だと思います。

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

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

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

/*
     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

UXプロファイラーは、ユーザーの観点からこの問題に取り組みます。一部のユーザーアクション（クリック）によって発生したすべてのブラウザーイベント、ネットワークアクティビティなどをグループ化し、レイテンシ、タイムアウトなどのすべての側面を考慮に入れます。

私は似たようなものを探していましたが、これを見つけました。

https://jsbench.me/

これにより、左右の比較が可能になり、結果を共有することもできます。

重要なルールは、いかなる状況でもユーザーのブラウザをロックしないことです。その後、私は通常、実行時間を見て、続いてメモリ使用量を調べます（クレイジーなことをしている場合を除いて、その場合は優先度が高くなる可能性があります）。

パフォーマンステストは最近流行語のようになりましたが、パフォーマンステストがQAや製品の出荷後においても重要なプロセスではないということではありません。そして、私は多くの異なるツールを使用してアプリを開発していますが、Chromeプロファイラーのような上記のツールの一部は、SaaSまたは何かオープンソースを見ていて、何かがおかしくなったという警告が表示されるまで忘れてしまいます。 。

基本的なアラートを設定するためだけにフープを飛び越えなくても、パフォーマンスを監視できる素晴らしいツールがたくさんあります。自分でチェックする価値があると思うものをいくつか紹介します。

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

試してみて、鮮明な画像をペイントするには、ここでは監視アプリケーションを反応させるための設定方法にはほとんどのチュートリアルです。

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

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);