35

ページを非常にゆっくりと移動している要素がいくつかあります。基本的に、2 つの画像の左余白を 40 秒ほどかけて減らしています。

視覚的には、美しく機能しています。ただし、アニメーション中にプロセッサーの使用率が約 50% に跳ね上がります。これは特定のブラウザに固有のものではなく、Safari3 と Firefox3 でも同じです。両方のブラウザでページを実行している場合、CPU は約 95% の使用率で悲鳴を上げています。

jQuery 1.3 を使用しています。両方のアニメーションが同時に発生しています。ページに Flash はありません。コードをコメント アウト (アニメーションを削除) してページを更新すると、プロセッサはすぐに通常の使用に戻ります。

Flash に頼る必要がないことを願っていますが、Hulu.com で番組を見ても、CPU がこのように急上昇することはありません。

考え？

4

7 に答える 7

44

これは古めかしい質問であり、ティムは素晴らしい答えを提供してくれましたが、この問題の解決策を探している人のために更新を投稿する必要があると思いました.

jQuery 1.4.3では、 jQuery.fx.intervalプロパティを介して、jQuery のアニメーションが使用する間隔を直接設定できます。したがって、次のようなことが簡単にできます。

jQuery.fx.interval = 50;
于 2010-12-08T21:43:30.260 に答える
34

jQuery animate() の仕組みは、アニメーションの状態を反映するように DOM を更新する関数を定期的に起動して呼び出すタイマーを使用することだと思います。通常、アニメーションは比較的短く、かなりの量の画面領域をカバーする可能性があるため、滑らかなアニメーションを生成するためにかなり高い速度でタイマーが期限切れになり、リセットされるのではないかと思います (確認せずに)。アニメーションには時間がかかるため、アニメーション関数を変更して、アニメーションの進行速度をオプションで設定できるようにすることができます。あなたの場合、おおよそ毎秒約3〜4ピクセルをカバーしているため、250ミリ秒ごとに更新するだけで済みます。

于 2009-01-19T21:43:14.200 に答える
20

人々は、jQuery のリフレッシュ レートの低下について言及しています。このファイル (jquery.animation-fix.js) を使用して、jQuery 1.4 のタイマー関数をオーバーライドできます。

function now() {
    return (new Date).getTime();
}
jQuery.fx.prototype.custom = function( from, to, unit ) {
    this.startTime = now();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || "px";
    this.now = this.start;
    this.pos = this.state = 0;

    var self = this;
    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !jQuery.fx.prototype.timerId ) {
        //timerId = setInterval(jQuery.fx.tick, 13);
        jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 2050);
    }
}

したがって、これを含む行を変更します

jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 50);

50 を任意の間隔に変更します。それはミリ秒（ms）です

このコードを別のファイルに保存する場合は、次のように添付できます。

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.animation-fix.js" type="text/javascript"></script>
于 2010-05-23T22:01:30.723 に答える
3

jQuery animate は、javascript 関数 'setInterval' を使用して、数ミリ秒ごとにオブジェクトを更新します。残念ながら、jQuery の間隔はデフォルトでは「13ms」です。毎秒 76 回の更新です。このような低速および中程度のアニメーションには多くの方法があります。

13 ミリ秒は jQuery にハードコードされています。したがって、jQuery.js でのみこの値を直接変更できます。遅い群れしかない場合は、最大 100 ミリ秒まで上げることができます。より速いアニメーションもある場合は、50 に設定する必要があります。

setInterval(); のパラメーターを変更できます。関数カスタムで。'jQuery.fx.prototype { ... カスタム: function() { ... } ... }'

于 2009-10-22T17:29:51.643 に答える
2

アニメーションにはループ操作が含まれており、それらは何があっても実際に CPU をクランチします。

jQuery を使用するのがどれほど簡単かはわかりませんが、必要なのは、アニメーションが消費するサイクルを減らす必要があるということです。アニをもう少しぎざぎざにするか (表示が滑らかではありません)、ループを最適化するか、アニの作業を減らす必要があります。

40秒？アニメだとちょっと長くない？私は彼らがそれよりももう少し即時的であるべきだと思った.

于 2009-01-19T21:44:03.950 に答える
2

Scriptaculous でアニメーションのパフォーマンスを観察したところ、同様の CPU スパイクが見つかりました。IE では約 50%、Firefox ではパフォーマンスがわずかに向上 (16 ～ 30%) で、どちらも DuoCore PC でした。JQuery と Scriptaculous はどちらも基礎となる CSS を変更することで機能するため、Javascript の実装は計算コストが高くなると言っても過言ではありません。

Flash の使用に行き詰まっている可能性があります。

于 2009-01-19T21:47:00.917 に答える
0

Drupal 6 の実稼働環境でこの修正を機能させる必要がありましたが、Tim によって投稿された回答が本当に気に入っています。

jQuery更新モジュールを使用してjQuery 1.3.2をインストールしたので、私が使用しているものとTimの修正が設計されているjQuery 1.4との間にいくつかの違いがあります。

ティムの指示に従うことで、90% の道のりをたどることができました。代わりに、このコードを思いつくために、10 分間思考の限界を超えなければなりませんでした..

25 ～ 33 のタイマー値は、背景画像のフェードなどの中程度の速度のアニメーションの場合、13 ミリ秒よりもはるかにうまく機能するようです。

var timerId;

function now() {
    return (new Date).getTime();
}

jQuery.fx.prototype.custom = function( from, to, unit ) {
    this.startTime = now();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || "px";
    this.now = this.start;
    this.pos = this.state = 0;

    var self = this;
    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

        if ( t() && jQuery.timers.push(t) && !timerId ) {
    timerId = setInterval(function(){
        var timers = jQuery.timers;

        for ( var i = 0; i < timers.length; i++ )
            if ( !timers[i]() )
                timers.splice(i--, 1);

        if ( !timers.length ) {
            clearInterval( timerId );
            timerId = undefined;
        }
    }, 25);
}
};
于 2010-08-16T00:04:40.663 に答える