jQuery animate () y rendimiento del navegador

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 forma más simple...

A partir de jQuery 1.4.3 puede establecer el intervalo que utiliza animate de jQuery directamente a través del jQuery.fx.intervalo propiedad. Así que simplemente puedes hacer algo como:

jQuery.fx.interval = 50;

La gente ha mencionado ralentizar la frecuencia de actualización de jQuery. Puede anular la función de temporizador en jQuery 1.4 con este archivo (jquery.animación-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 a cualquier intervalo que desee. Es decir, en milisegundos (ms)

Si guarda este código en un archivo diferente, puede adjuntarlo de la siguiente manera:

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

JQuery animate utiliza la función de javascript 'setInterval' para actualizar los obects cada pocos milisegundos. Desafortunadamente el intervalo en jQuery es por defecto '13ms'. Eso es 76 actualizaciones cada segundo. Camino a mucho para tales animaciones lentas y medianas.

Los 13ms están codificados en jQuery. Por lo que puede cambiar directamente este valor en el jQuery.sólo js. Si solo tiene los payasos lentos, puede ir hasta 100 ms. Si también tiene algunas animaciones más rápidas, debe configurarlo en 50.

Usted puede cambiar el parámetro para setInterval (); en la función custom. jQuery.fx.prototipo { ... custom: function () {... } ... }'

Las animaciones implican operaciones de bucle, y esas realmente crujirán la CPU sin importar qué.

No sé lo fácil que es hacer con jQuery, pero lo que tiene que suceder es que la animación necesita consumir menos ciclos. Ya sea que haga el ani un poco más irregular (la pantalla no es tan suave), el bucle debe optimizarse o reducir el trabajo del ani.

Acabo de ver el rendimiento de la animación bajo Scriptaculous, y encontró picos de CPU similares: aproximadamente 50% para IE, un poco mejor rendimiento (16-30%) para Firefox both tanto en un PC DuoCore. Dado que tanto jQuery como Scriptaculous funcionan cambiando el CSS subyacente, creo que es seguro decir que cualquier implementación de Javascript va a ser computacionalmente costosa.

Puede que estés atascado con Flash.

Me gusta mucho la respuesta publicada por Tim, aunque necesitaba que esta solución funcionara en un entorno de producción de Drupal 6.

Tengo jQuery 1.3.2 instalado, a través del uso del módulo de actualización de jQuery, por lo que hay algunas diferencias entre lo que estoy usando y jQuery 1.4 que la corrección de Tim está diseñada para.

Siguiendo las instrucciones de Tim me consiguió el 90% del camino, solo tuve que poner mi límite de pensamiento durante 10 minutos para llegar a este código en su lugar..

Valores de temporizador de 25 - 33 parecen funcionar mucho mejor que 13ms para animaciones de velocidad media, como el desvanecimiento de imágenes de fondo.

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