4

したがって、私の Web ページはどこでも多くの jquery を使用しています。これは単一ページの JavaScript アプリケーションであり、jquery を使用してほとんどすべての HTML を手作業で作成しています。ドラッグ可能でサイズ変更可能な div がたくさんあります。jquery-ui-effects .hide と .show をスライド アニメーションと共に使用して、いくつかの div を移動します。

アプリケーションを起動すると、すべてが問題なく動作しますが、ページが開いてから 10 ～ 15 分後には、jquery-ui メソッドを使用するすべてが非常に遅くなり、使用できなくなります。div の 1 つをサイズ変更しようとすると、コーナーで最初にマウスを押したときに速度が大幅に低下し、クリックを離した後、ページが再び応答するまでに数秒かかります。ドラッグアンドドロップも同様です。div で $().draggable および $().resizable を呼び出すのにも多くの時間がかかります。奇妙なことに、ドラッグとサイズ変更自体は遅くはなく、開始/終了するだけです。ページが開いている時間が長いほど、遅くなります。

ページの他のすべての機能は、ページが開いてから 1 時間経過した後でも問題なく動作します (基本的なキャンバス描画が配置されていて、jquery-ui 機能ではなく他の jquery も正常に動作します)。ブラウザが使用するメモリが 150 MB を超えることはないため、親のメモリ リークはありません。

問題は私の開始/停止のサイズ変更/ドラッグ機能にあると言う人もいるかもしれません。速度を変えずにそれらを削除しようとしたためではなく、アニメーションの速度低下についても説明できません。

アニメーション時に CPU 使用率が 100% になり (私はシングル コア システムを使用しています)、jquery-ui 関数を使用していない場合は 0% のままです。アニメーション機能をプロファイリングすると (ページが 30 分以上開いた後)、curCSS という名前のメソッド (jquery-1.8.1.js 行 6672) が CPU 時間の 95% を使用していることがわかります。アプリケーションを起動してから数秒後にアニメーションを実行すると、この同じ関数は 4.5% しか使用しません。

jquery-1.8.1 と jquery-ui 1.8.22 を使用しています。

コードのどの部分が間違っているのかわからず、コードベース全体が巨大であるため、すべてのコードを投稿することはできません。アニメーションは次のように行われます。

//internal code that prevents updating data on the divs that are part of the animation
var hiding= true;
    var showing= true;

    containerToHide.$div.hide("slide", {direction: "left"}, 1000, function() {
        hiding= false;
        if (!showing) { //both animations ended
            //internal code to allow update data on div after animation ends
        }
    });

    containerToShow.$div.show("slide", {direction: "right"}, 1000, function() {
        showing= false;
        if (!hiding) {//both animations ended
            //internal code to allow update data on div after animation ends
        }
    });

これは問題ではないと思いますが、アニメーションはかなり標準的なものです。

何を探すべきかについてのヒントは大歓迎です。

4

1 に答える 1

0

何時間ものデバッグの後、私はついに犯人を見つけました。dojo を使用してグラフを作成しています。Dojo は SVG を使用してグラフを作成します。グラフにグラデーション効果を加えました。

グラフが更新されるたびに、svg タグから古い rect タグがクリアされますが、defs タグから lineargradient タグはクリアされませんでした。数分後、グラフに何千ものlieargradientタグがあり、それらのグラフを再レンダリングする必要があるときに速度が低下しました。これは、グラフがすべてのアニメーション内にあるdivをスライドさせていたためです。

不要なタグを消去する方法を見つけようとしています。できれば Dojo メソッドを使用しますが、そうでない場合は、自分で手動で削除します。

于 2012-09-28T13:54:22.570 に答える