web-dev-qa-db-fra.com

Pourquoi jQuery n'utilise-t-il pas requestAnimationFrame?

Certains navigateurs prennent en charge requestAnimationFrame, alors pourquoi ne pas l'utiliser? Après tout, cela a été pris en charge depuis Google Chrome 1 . Malgré cela, jQuery ne semble pas l'utiliser . J'ai trouvé un rapport de bogue à ce sujet, mais aucune explication réelle n'a été donnée? Je suis sûr que les gens de jQuery ont leurs raisons, cependant.

Pourquoi n'utiliseraient-ils pas cette superbe API?

jqueryrequestanimationframe
73
Randomblue

Dans ticket # 9381 vous pouvez voir pourquoi ils ont cessé d'utiliser requestionAnimationFrame après un certain temps.

Pour résumer, les problèmes étaient que les animations ne s'exécutaient pas (les navigateurs tentent de réduire la charge du processeur) lorsque la fenêtre n'avait pas le focus, ce qui est OK si la fenêtre est masquée, mais pas si elle est visible, juste hors du focus. De plus, les files d'attente d'animation se sont empilées et après que la fenêtre ait retrouvé le focus, les choses sont devenues folles. Cela nécessiterait des changements moches dans le code et/ou des changements dans la façon dont les gens ajoutent des choses à la file d'attente d'animation. Il a donc été décidé de supprimer le support jusqu'à ce qu'il existe une meilleure façon de procéder.

74
Mitar

Compte tenu des autres réponses et objections ici, je voulais tester cela sur une simple animation de diaporama:

http://brass9.com/nature

Depuis 2013, les objections formulées dans d'autres réponses ne semblent plus significatives. J'ai ajouté

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

à mon code d'animation existant, et vérifié qu'il allume et affecte les animations de fondu utilisées. Il fonctionne de manière fiable, même dans les fenêtres d'arrière-plan, dans Chrome 30, IE 11 et FF 24. Test Android 2.3 , il semble utiliser le polyfill et fonctionner comme prévu.

jQuery 3

jQuery 3.0 intègre requestAnimationFrame . Fondamentalement, jQuery pourrait le gérer correctement, mais certains utilisateurs appelleraient .setInterval(function() { tag.animate(, le bousillant. D'où le dégagement vers la version majeure. jQuery 3 ne prend pas en charge et ne supportera jamais IE8 et les versions antérieures, donc si vous avez des utilisateurs IE8, restez avec jQuery 1.x.

Transitions CSS

Dans mes tests, les affirmations d'économie de CPU/batterie de requestAnimationFrame sont de fausses promesses. Je vois une utilisation élevée du processeur avec, par exemple, des fondus longs. Ce qui économise le CPU/la batterie est Transitions CSS , probablement parce que le navigateur, en particulier les navigateurs mobiles, peut faire des hypothèses beaucoup plus fortes sur ce que vous avez l'intention et ce qui leur est demandé, et le code natif est toujours plus rapide que Javascript + DOM.

Donc, si vous voulez vraiment économiser CPU/batterie, les transitions CSS sont faites pour vous. IE9 et les versions ultérieures ne peuvent pas les gérer et il y a encore beaucoup d'utilisateurs, alors pensez à jquery.transit et leur retour à animate en bas de la page.

12
Chris Moschini

Dans la source jQuery pour v1.6.2, je vois requestAnimationFrame utilisé s'il est présent. Je n'ai pas étudié le code en détail pour voir qu'il est utilisé pour tout ce pour quoi il pourrait être utilisé, mais il est utilisé dans la section d'animation du code au lieu d'un appel à setInterval(). Voici le code de 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 );
        }
    }
},

Je n'utilise pas encore 1.6.4 donc je ne connais pas cette version. Si ce n'est pas dans cette version, il doit y avoir eu quelques problèmes, il a donc été supprimé.

MODIFIER:

Si vous lisez ce billet de blog , il semble qu'il ait été retiré de 1.6.3 et sera peut-être remis en 1.7 et la principale raison pour laquelle il a été retiré est parce qu'il a cassé certaines choses que les gens n'étaient "pas correctement" msgstr "utiliser la file d 'animation pour (bien que ce soit une question d' opinion).

6
jfriend00