Warum verwendet jQuery requestAnimationFrame nicht?

Einige Browser unterstützen requestAnimationFrame, warum also nicht? Immerhin wird es seit Google Chrome 10 unterstützt . Trotzdem scheint jQuery es nicht zu verwenden . Ich habe einen Fehlerbericht darüber gefunden, aber es wurde keine wirkliche Erklärung gegeben? Ich bin mir jedoch sicher, dass die jQuery-Leute ihre Gründe haben.

Warum würden sie diese großartige API nicht verwenden?

In Ticket Nr. 9381 können Sie nachlesen, warum sie requestionAnimationFramenach einiger Zeit nicht mehr verwendet werden.

Zusammenfassend lässt sich sagen, dass Animationen nicht ausgeführt wurden (Browser versuchen, die CPU-Auslastung zu reduzieren), wenn das Fenster keinen Fokus hatte. Dies ist in Ordnung, wenn das Fenster ausgeblendet ist, aber nicht, wenn es sichtbar ist, nur außerhalb des Fokus. Außerdem häuften sich die Animationswarteschlangen und nachdem das Fenster wieder fokussiert war, wurde es wahnsinnig. Dies würde hässliche Änderungen im Code und / oder Änderungen beim Hinzufügen von Dingen zur Animationswarteschlange erfordern. Daher wurde beschlossen, die Unterstützung zu entfernen, bis es einen besseren Weg gibt, dies zu tun.

Angesichts der anderen Antworten und Einwände hier wollte ich dies an einer einfachen Diashow-Animation testen:

http://brass9.com/nature

Ab 2013 scheinen die Einwände in anderen Antworten hier nicht mehr signifikant zu sein. Ich habe hinzugefügt

https://github.com/gnarf/jquery-requestAnimationFrame/blob/master/src/jquery.requestAnimationFrame.js

zu meinem vorhandenen Animationscode und überprüft, ob er sich einschaltet und die verwendeten Überblendanimationen beeinflusst. Es funktioniert zuverlässig, auch in Hintergrundfenstern, in Chrome 30, IE 11 und FF 24. Beim Testen von Android 2.3 scheint es die Polyfüllung zu verwenden und wie erwartet zu funktionieren.

jQuery 3

jQuery 3.0 integriert requestAnimationFrame . Grundsätzlich könnte jQuery gut damit umgehen, aber einige Benutzer würden anrufen.setInterval(function() { tag.animate( und es vermasseln. Also die Punt to Major Version Release. jQuery 3 unterstützt IE8 und niedriger nicht und wird es auch nie unterstützen. Wenn Sie also IE8-Benutzer haben, bleiben Sie bei jQuery 1.x.

CSS-Übergänge

In meinen Tests sind die CPU- / Batteriesparansprüche requestAnimationFramefalsche Versprechungen. Ich sehe eine hohe CPU-Auslastung, zum Beispiel bei langen Überblendungen. Was CPU / Batterie spart, sind CSS-Übergänge , wahrscheinlich weil der Browser, insbesondere mobile Browser, viel stärkere Annahmen darüber treffen kann, was Sie beabsichtigen und was sonst noch von ihnen verlangt wird, und nativer Code immer noch schneller als Javascript + DOM ist.

Wenn Sie also wirklich CPU / Akku sparen möchten, sind CSS-Übergänge genau das Richtige für Sie. IE9 und niedriger können damit nicht umgehen, und es gibt immer noch viele Benutzer. Betrachten Sie also jquery.transit und deren Fallback bis animatezum Ende der Seite.

In der jQuery-Quelle für Version 1.6.2 wird requestAnimationFramesie verwendet, wenn sie vorhanden ist. Ich habe den Code nicht im Detail untersucht, um festzustellen, dass er für alles verwendet wird, wofür er verwendet werden kann, aber er wird im Animationsabschnitt des Codes anstelle eines Aufrufs von verwendet setInterval(). Hier ist der Code aus 1.6.2:

// Start an animation from one number to another
custom: function( from, to, unit ) {
    var self = this,
        fx = jQuery.fx,
        raf;

    this.startTime = fxNow || createFxNow();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || ( jQuery.cssNumber[ this.prop ] ? "" : "px" );
    this.now = this.start;
    this.pos = this.state = 0;

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

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !timerId ) {
        // Use requestAnimationFrame instead of setInterval if available
        if ( requestAnimationFrame ) {
            timerId = true;
            raf = function() {
                // When timerId gets set to null at any point, this stops
                if ( timerId ) {
                    requestAnimationFrame( raf );
                    fx.tick();
                }
            };
            requestAnimationFrame( raf );
        } else {
            timerId = setInterval( fx.tick, fx.interval );
        }
    }
},

Ich verwende 1.6.4 noch nicht, daher weiß ich nichts über diese Version. Wenn es nicht in dieser Version ist, muss es einige Probleme gegeben haben, so dass es entfernt wurde.

BEARBEITEN:

Wenn Sie diesen Blog-Beitrag lesen , hört es sich so an, als wäre er aus 1.6.3 herausgezogen worden und wird möglicherweise wieder in 1.7 aufgenommen. Der Hauptgrund dafür ist, dass einige Dinge kaputt gegangen sind, die die Animationswarteschlange für (falsch) verwendet hat ( obwohl das vielleicht Ansichtssache ist).