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

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

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

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

ベストアンサー1

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

私たちは、より高速なコンポーネントに切り替えたり、何らかのメソッドを最適化したりするのではなく、まずデータをレンダリングし、次に setTimeout を使用してグリッドをレンダリングすることで、この問題を解決しました。つまり、最初に情報が表示され、1 秒後にグリッドが所定の位置に表示されます。全体として、この方法では処理時間がわずかに長くなりましたが、ユーザーにとっては、パフォーマンスが向上したと感じられます。


最近では、Chromeプロファイラーやその他のツールはどこでも利用でき、使いやすいです
console.time()mozilla ドキュメントchrome ドキュメント)
console.profile()(mozilla ドキュメントchrome ドキュメント)
performance.now()(mozilla ドキュメント)
Chrome ではタイムライン ビューも提供されており、フレーム レートを低下させている原因や、ユーザーが待機している可能性のある場所などを確認できます。

これらすべてのツールのドキュメントを見つけるのは本当に簡単です。そのために SO の回答は必要ありません。7 年経った今でも、私は最初の回答のアドバイスを繰り返し、ユーザーが気付かないところでは遅いコードをずっと実行し、ユーザーが気付くところではかなり速いコードを実行すると、かなり速いコードが十分に速くないと文句を言うだろうと指摘します。あるいは、サーバー API へのリクエストに 220 ミリ秒かかったとか。あるいは、そのようなことです。プロファイラーを取り出して、やるべき作業を探してみると、作業は見つかりますが、それがユーザーが必要とする作業ではないかもしれない、という点は変わりません。

おすすめ記事