web-dev-qa-db-ja.com

javascriptの高いCPU使用率-デバッグする方法は？

Javascriptの高いCPU使用率の原因を見つけるための最良の方法は何ですか？

サムネイルギャラリーにflickrから写真をロードするだけのスクリプトがあります。それらがロードされた後、何も実行されていません（ライトボックスに表示するためにクリックするのを待っています）が、CPU使用率は25％以上です。

Firebugを開き、プロファイルをクリックし、少し待ってからもう一度クリックしましたが、「報告するアクティビティがありません」と表示されます。何かが起こっていたら、それは報告しませんか？または、このツールを間違って使用していますか？

すべてがロードされた後にこれを実行しています。これは、CPU使用率が高くなる原因を確認するためです。

ありがとう、ウェズリー

編集：それが起源であることを追跡したようです。それはJSに関連するものではなく、CSSです！一体何ですか？

問題はこれです：

サムネイルギャラリーがあります。画像の読み込み中にサムネイルの代わりに読み込みインジケーターを表示します。

.thumbnail img {
   display:block;
   background-image: url("/images/ajax-loader.gif");
   background-position: center center; 
   background-repeat:no-repeat;
   overflow:hidden;
   color:white;
}

このコードを削除すると、CPU使用率は20％ではなく0.03％程度に低下します...これは、アニメーションGIFがまだ再生されているが、隠蔽されているためですか？

アニメーションGIFがCPUからこれほど多くのものを取得していることを知りませんでしたか？確かに、それは20回以上行われていますが、それでもなおです。サファリ/クロームでも同じでした。

各画像内で読み込みインジケーターを使用しないか、画像が正常に読み込まれたときに背景画像を削除する必要があると思います。

javascriptjqueryperformancedebuggingcpu
25
Wesley

私はここ数週間、Webサイト（JavaScriptだけでなく）を分析するためのツール "dynaTrace AJAX Edition" （無料のツール）を使用しました。かなり良いビューがあります。リソースの使用状況を示します。cpuの使用率が高い理由であるJavaScriptの部分（またはブラウザーの他の部分）を追跡してみてください。ただし、このツールは、firefoxと現在のInternetExplorerの実装でのみ機能します。しかし、firebugを使用している場合、それはfirefoxを使用していることを示しているようです。

フォーラムページに "ブラウザのCPU使用率とAJAXパフォーマンス？" に影響を与える可能性のある他の項目があります。これは役立つヒントをさらに提供します。

4
mliebelt

Chrome/Chromium開発ツール"プロファイラー、スタート、ページのリロード、数分待ってから停止してみてください。何が問題になるのかを知るには十分なデータです。

ブラウザでのCPU使用率が高い場合のもう1つの一般的な問題は、cssアニメーション（およびgif画像）です。 Webアプリケーションの開発時にCPU使用率の高い問題が発生しました。タブがアクティブ/表示されている場合にのみ発生するのは奇妙でしたが、バックグラウンドでは発生せず、FFに問題がありました。= ChromeおよびChromium。最終的にアニメーション化されましたBootstrapプログレスバー。

これはここで簡単に確認できます http://getbootstrap.com/components/#progress-animated 、Chromeで開き、[ツール]"[タスクマネージャー]を開き、BootstrapサイトとCPU使用率を確認してください。

これは厳密には質問に対する答えではなく、問題を見つけるための役立つヒントだと思います。まだコメントできないので、誰かが役に立つと思うので、答えとして投稿することにしました。これがそんなに悪い習慣であるかどうか教えてください。

2
jmelero

FireBugプロファイル機能を有効にした後、ページをリロードしてみてください。

私はこれを行うためにFireBugプロファイル機能を多用しました。どの関数がほとんどの時間を消費しているかを確認できます。素晴らしいことです。簡単なJavaScriptの例を使用して、他のページでこれを試してください。それはうまくいくはずです。あなたの例でうまくいかない場合は、バグを投稿してください。

2
TMS