4

画像閲覧用のページを作りました。このページには、私が書いていない他のコードが含まれています。このページは、読み込み時に 40 個の小さな画像を読み込みます。次に、ユーザーが下にスクロールすると、ajax を介して 40 枚の画像の追加ページを読み込むことができます。15 ～ 20 ページになると、ページの速度が大幅に低下することに気付きます。アプリのカウンターを確認すると、CPU が 100% に達し、メモリが 3GB を超えることがあります。そうすると必然的に、JQuery の実行に時間がかかりすぎるというモーダルが表示され、スクリプトの実行を停止するかどうかを尋ねられます。最大 800 枚の画像を含むページは大きな負荷であることに気付きましたが、JQuery の問題は、一部のコードがこのますます大きくなる dom オブジェクトのグループを繰り返し処理している可能性があることを示唆しています。15 ページほどを過ぎると、指数関数的に遅くなるように見えます。20ページになるとほとんど使い物にならなくなります。

まず第一に、これほど多くの画像がある場合、最小限の JS でもページを効率的に実行することは可能でしょうか? 次に、JS を「トレース」し、実行されている関数を確認して、最も可能性の高い原因を特定するための推奨される方法はありますか? これは私にとって最も重要です - Firebug で行う良い方法はありますか?

ありがとう ：）

編集 - 答えが見つかりました。読み込みに失敗した画像を一般的な画像に置き換えるために使用されていた古いコードがいくつかありました。このコードは Jquery の .each 演算子を使用していたため、ページが読み込まれるたびに、ページ全体と新しい ajax の追加ごとに繰り返し処理されていました。ajax で読み込まれた画像が影響を受けないように、CSS でチェックする必要がある画像のクラスを設定します。

4

5 に答える 5

1

Firebug、および他のすべてのデバッグ ツールを使用すると、関数をプロファイリングできます。実行にかかった時間と、呼び出された回数を確認できます。

http://getfirebug.com/javascript

参照: JavaScript パフォーマンスのプロファイリング

調べると便利なもう 1 つのツールは、profile() 関数です。

console.log('Starting Profile');
console.profile();
SuspectFunction();
console.profileEnd();

デバッガーのコンソール ウィンドウを使用して、プロファイルの結果を確認できます。

于 2012-10-10T18:33:27.360 に答える
0

私は Firebug または Chrome でタイマー関数を使用することを好みます。次のように呼び出すことができます。

   console.time('someFunction timer');

   function someFunction(){ ... }

   console.timeEnd('someFunction timer');

これはプロファイラー関数ほど堅牢ではありませんが、関数の所要時間を把握できるはずです。

また、100% の CPU と 3GB のメモリで実行している場合、ほぼ確実にメモリ リークが発生しています。より多くのページが読み込まれるときに、最初の画像の一部を削除することを検討したい場合があります。たとえば、5 ページが表示された後、ユーザーが 6 ページ目を表示したときに最初のページを削除します。

于 2012-10-10T20:39:08.140 に答える
0

最初の質問に答えると、15 ページの画像はコンピューターで処理するのに問題はありません。Google は最大 46 ページの画像をまったく遅延なく読み込みます。それ以降はロードできなくなりますが。

2 番目の質問に答えてください。JS コードを追跡する方法はたくさんあります。パフォーマンス関連のデバッグを行っているため、タイムスタンプ付きのコンソール ログを使用します。

console.log("メッセージ" + 新しい日付());

パフォーマンスを測定したい関数の最初と最後に 1 つ配置し、ログを読んで、これらの各関数の実行にかかる時間を確認します。タイムスタンプを比較して、どの余分なコードが実行されているか、およびコードの実行にかかった時間を確認します。

最後に、Firebug でコンソール タブに移動し、ページを下にスクロールし始める前に Pofile をクリックします。次に、15 ページまでスクロールし、[プロフィール] をもう一度クリックします。呼び出された関数とそれにかかった時間を分類します。

于 2012-10-10T20:25:02.117 に答える
0

私が使用した最高のツールは、https://developers.google.com/web-toolkit/speedtracer/ for Chrome です

于 2012-10-10T20:06:52.110 に答える
0

コードをもう一度確認することで問題を解決できました。ajax 経由で新しい画像を読み込んでいましたが、すべての画像をチェックする古いコード行、つまり $('img') を使用して、読み込みに失敗した画像を一般的な画像に置き換えていました。これは、新しい画像を継続的にロードするときに、このセレクターが成長する dom 全体を何度も反復する必要があることを意味します。そのコードを変更したところ、ページが飛んでいます! 助けてくれてありがとう。

于 2012-11-14T16:36:50.047 に答える