jQuery animate() und browser-performance

Ich denke, die Art und Weise jQuery animate() funktioniert, ist, dass es verwendet einen timer, der in regelmäßigen Abständen Feuer und ruft eine Funktion, die updates der DOM zu reflektieren, den Zustand der animation. In der Regel Animationen sind relativ kurz, und Sie decken eine Menge Platz auf dem Bildschirm, so vermute ich (ohne Bestätigung), dass der Zeitgeber abläuft, und zurückgesetzt wird, auf einem relativ hohen rate zu erzeugen, eine glatte animation. Da deine animation dauert eine lange Zeit, könnten Sie in der Lage sein zu ändern die animate-Funktion, so dass die rate, mit der die animation Erlöse können Sie über eine option. In Ihrem Fall würden Sie müssen nur ein update alle 250ms oder so, da bist du in etwa 3-4 Pixel pro Sekunde, rund.

InformationsquelleAutor der Antwort tvanfosson

Leute haben erwähnt, verlangsamt jQuery refresh-rate. Sie können das überschreiben der timer-Funktion in jQuery 1.4 mit dieser Datei (jquery.animation-fix.js):

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);
    }
}

So ändern Sie die Zeile mit diesem an

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

Ändern Sie die 50 zu, was Intervall, das Sie möchten. Das ist in Millisekunden (ms)

Wenn Sie speichern Sie diesen code in einer anderen Datei, können Sie es wie folgt:

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.animation-fix.js" type="text/javascript"></script>

InformationsquelleAutor der Antwort Tim

Animationen beinhalten looping-Operationen, und die wird wirklich die crunch-CPU, egal was.

Ich weiß nicht, wie einfach es ist zu tun mit der jQuery, aber was geschehen muss, ist die animation benötigt, verbrauchen weniger Zyklen. Entweder machst du die ani ein wenig mehr gezackt (das display ist nicht so glatt ist), wird die Schleife muss optimiert werden, oder reduzieren Sie die Arbeit der ani.

40 Sekunden? ist das nicht ein bisschen lang für eine animation? Ich dachte, Sie sind sposed ein wenig mehr sofort als das.

InformationsquelleAutor der Antwort StingyJack

Ich wirklich gerne die Antwort gepostet von Tim, obwohl ich brauchte, um diese zu beheben, arbeitet in einer Drupal 6 Produktionsumgebung.

Habe ich jQuery 1.3.2 installiert, durch den Einsatz von jQuery-update-Modul, so gibt es einige Unterschiede zwischen dem, was ich verwende und jQuery 1.4, Tim fix ausgelegt ist.

Folgenden Tims Anleitung, hab mir 90% der Weg dorthin, hatte ich nur mein denken Mütze auf, für 10 Minuten zu kommen mit diesem code statt..

timer-Werte von 25 - 33 zu funktionieren scheinen, viel besser als 13ms für mittlere Geschwindigkeit Animationen wie fading hintergrund-Bilder.

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);
}
};

InformationsquelleAutor der Antwort David Meister