tag change jquery requestanimationframe

jquery - change - edit meta tag javascript



¿Por qué jQuery no usa requestAnimationFrame? (3)

Algunos navegadores admiten requestAnimationFrame , ¿por qué no usarlo? Después de todo, es compatible desde Google Chrome 10 . A pesar de eso, jQuery no parece estar usándolo . He encontrado un informe de error al respecto, pero no se dio una explicación real. Sin embargo, estoy seguro de que la gente de jQuery tiene sus razones.

¿Por qué no usarían esta impresionante API?


Dadas las otras respuestas y objeciones aquí, quería probar esto en una animación de diapositivas simple:

http://brass9.com/nature

A partir de 2013 las objeciones en otras respuestas aquí ya no parecen ser significativas. he añadido

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

a mi código de animación existente, y verificó que esté encendiéndose y afectando las animaciones de desvanecimiento en uso. Funciona de manera confiable, incluso en ventanas de fondo, en Chrome 30, IE 11 y FF 24. Al probar Android 2.3, parece que utiliza el relleno y funciona como se esperaba.

jQuery 3

jQuery 3.0 integra requestAnimationFrame . Básicamente, jQuery podría manejarlo bien, pero algunos usuarios llamarían a .setInterval(function() { tag.animate( , atornillándolo). Por lo tanto, la puntualización de la versión principal. JQuery 3 no admite y nunca será compatible con IE8 y versiones posteriores, por lo que si tiene usuarios de IE8, quédese con jQuery 1.x.

Transiciones CSS

En mi prueba, las afirmaciones de CPU / ahorro de batería requestAnimationFrame son falsas promesas. Veo un alto uso de CPU con él, por ejemplo, desvanecimientos largos. Lo que sí ahorra CPU / batería es CSS Transitions , probablemente porque el navegador, especialmente los navegadores móviles, hace suposiciones mucho más fuertes sobre lo que pretendes y qué más se les pide, y el código nativo es aún más rápido que Javascript + DOM.

Entonces, si realmente quiere ahorrar CPU / batería, las Transiciones CSS son para usted. IE9 y siguientes no pueden manejarlos y todavía hay muchos usuarios, así que considere jquery.transit y su Fallback para animate en la parte inferior de la página.


En el ticket # 9381 puede leer por qué dejaron de usar requestionAnimationFrame después de un tiempo.

En resumen, los problemas fueron que las animaciones no se ejecutaron (los navegadores intentan reducir la carga de la CPU) cuando la ventana no tenía foco, lo cual está bien si la ventana está oculta, pero no si está visible, solo fuera del foco. Además, las colas de animación se acumularon y después de que la ventana recuperara el foco, las cosas se volvieron locas. Esto requeriría cambios desagradables en el código y / o cambios en cómo las personas agregan cosas a la cola de animación. Por lo tanto, se decidió eliminar el soporte hasta que haya una forma mejor de hacerlo.


En la fuente de jQuery para v1.6.2, veo que requestAnimationFrame se usa si está presente. No he estudiado el código con gran detalle para ver que se está utilizando para todo lo que podría usarse, pero se está utilizando en la sección de animación del código en lugar de llamar a setInterval() . Aquí está el código 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 ); } } },

Todavía no estoy usando 1.6.4 así que no sé sobre esa versión. Si no está en esa versión, debe haber habido algunos problemas, por lo que se eliminó.

EDITAR:

Si lees esta publicación en el blog , parece que fue sacada de 1.6.3 y quizás la vuelvan a poner en 1.7 y la razón principal por la que fue retirada es porque rompió algunas cosas que la gente estaba "incorrectamente" usando la cola de animación ( aunque tal vez sea una cuestión de opinión).