ejemplos - jquery fadein
jQuery animate() y el rendimiento del navegador (7)
Acabo de ver el rendimiento de la animación en Scriptaculous, y encontré picos de CPU similares: aproximadamente el 50% para IE, un rendimiento ligeramente mejor (16-30%) para Firefox, ambos en una PC DuoCore. Dado que tanto JQuery como Scriptaculous funcionan al cambiar el CSS subyacente, creo que es seguro decir que cualquier implementación de Javascript va a ser costosa desde el punto de vista informático.
Es posible que estés atrapado yendo con Flash.
Tengo algunos elementos que me estoy moviendo por la página muy lentamente. Esencialmente, estoy disminuyendo el margen izquierdo de dos imágenes en un lapso de 40 segundos más o menos.
Visualmente, está funcionando maravillosamente. Sin embargo, mi procesador salta a aproximadamente el 50% de uso durante las animaciones. Esto tampoco es específico de ningún navegador, es lo mismo en Safari3 y Firefox3. Si tengo ambos navegadores ejecutando la página, mi CPU está gritando con un 95% de uso.
Estoy usando jQuery 1.3. Ambas animaciones están sucediendo al mismo tiempo. No hay Flash en la página. Si comento el código (elimino la animación) y actualizo la página, mi procesador vuelve inmediatamente al uso normal.
Espero no tener que recurrir a Flash, pero incluso ver programas en Hulu.com no aumenta mi CPU de esta manera.
¿Pensamientos?
Creo que la forma en que jQuery animate () funciona es que usa un temporizador que periódicamente dispara e invoca una función que actualiza el DOM para reflejar el estado de la animación. Normalmente, las animaciones son relativamente cortas y pueden cubrir una buena cantidad de espacio en pantalla, así que sospecho (sin confirmar) que el temporizador expira y se reinicia a una velocidad bastante alta para generar una animación fluida. Dado que la animación lleva mucho tiempo, es posible que pueda modificar la función animada para que la velocidad a la que se desarrolla la animación se pueda establecer mediante una opción. En tu caso, solo necesitarías actualizar cada 250 ms aproximadamente, ya que cubrías aproximadamente 3-4 píxeles por segundo, más o menos.
La gente ha mencionado la desaceleración de la frecuencia de actualización de jQuery. Puede anular la función del temporizador en jQuery 1.4 con este archivo (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);
}
}
Así que modifica la línea con esto en ella
jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 50);
Cambie el 50 al intervalo que desee. Eso está en milisegundos (ms)
Si guarda este código en un archivo diferente, puede adjuntarlo así:
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.animation-fix.js" type="text/javascript"></script>
Las animaciones implican operaciones de bucle, y esas realmente crujirán la CPU pase lo que pase.
No sé lo fácil que es hacer con jQuery, pero lo que debe suceder es que la animación necesite consumir menos ciclos. O haces el ani un poco más irregular (la pantalla no es tan suave), el looping debe optimizarse o reducir el trabajo del ani.
40 segundos? ¿No es un poco largo para una animación? Pensé que se supone que son un poco más inmediatos que eso.
Me gustó mucho la respuesta publicada por Tim, aunque necesitaba hacer que esta corrección funcionara en un entorno de producción Drupal 6.
Tengo jQuery 1.3.2 instalado, mediante el uso del módulo de actualización jQuery, por lo que hay algunas diferencias entre lo que estoy usando y jQuery 1.4 para lo que está diseñado el arreglo de Tim.
Seguir las instrucciones de Tim me llevó el 90% del camino hasta allí, solo tuve que ponerme la gorra de pensar durante 10 minutos para encontrar este código.
los valores de temporizador de 25 - 33 parecen funcionar mucho mejor que 13 ms para animaciones de velocidad media como imágenes de fondo que se desvanecen.
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);
}
};
Sé que esta es una pregunta antigua y Tim proporcionó una gran respuesta , pero pensé que debería publicar una actualización para cualquiera que busque una solución a este problema, ya que ahora hay una manera más simple ...
A partir de jQuery 1.4.3 , puede establecer el intervalo de usos animados de jQuery directamente a través de la propiedad jQuery.fx.interval . Entonces, simplemente puedes hacer algo como:
jQuery.fx.interval = 50;
jQuery animate usa la función javascript ''setInterval'' para actualizar los obects cada pocos milisegundos. Lamentablemente, el intervalo en jQuery es por defecto ''13ms''. Eso es 76 actualizaciones por segundo. Mucho para esas animaciones lentas y medianas.
Los 13ms están codificados en jQuery. Entonces puede cambiar directamente este valor solo en jQuery.js. Si solo tienes los clowds lentos, puedes subir hasta 100 ms. Si también tienes animaciones más rápidas, debes establecerlo en 50.
Puede cambiar el parámetro para setInterval (); en la función personalizada. ''jQuery.fx.prototype {... custom: function () {...} ...}''