jQuery animate () et les performances du navigateur

Question

J'ai quelques éléments que je me déplace en travers de la page très lentement. Essentiellement, je suis à la diminution de la marge de gauche de deux images sur une durée de 40 secondes.

Visuellement, ça fonctionne à merveille. Cependant, mon processeur grimpe à environ 50% d'utilisation pendant les animations. Ce n'est pas spécifique à un seul navigateur, soit - elle la même manière sur Safari3 et Firefox3. Si j'ai les deux navigateurs exécution de la page, mon CPU est en train de crier à environ 95% d'utilisation.

J'utilise jQuery 1.3. Deux animations sont se produire simultanément. Il n'y a pas de Flash sur la page. Si j'ai commenté le code (suppression de l'animation) et l'actualisation de la page, mon processeur renvoie immédiatement à une utilisation normale.

J'espère que je n'ai pas de Flash, mais même en regardant des spectacles sur Hulu.com ne pas spike mon CPU comme ça.

Pensées?

Answer 1

Je sais que c'est une question un peu vieux et Tim fourni une grande réponse, mais j'ai juste pensé que je devrais poster une mise à jour pour ceux qui cherchent une solution à ce problème, puisqu'il y a maintenant un moyen plus simple...

Comme de jQuery 1.4.3 vous pouvez définir l'intervalle de jQuery animate utilise directement via jQuery.fx.intervalle de propriété. Ainsi, vous pouvez simplement faire quelque chose comme:

jQuery.fx.interval = 50;

Answer 2

Je pense que la façon dont jQuery animate() fonctionne, c'est qu'il utilise un timer qui lance régulièrement et appelle une fonction qui met à jour les DOM afin de refléter l'état de l'animation. Généralement, les animations sont relativement courts et ils peuvent couvrir un montant équitable de l'écran de l'immobilier, donc je pense (sans confirmation) que l'expiration de la minuterie, et est remis à zéro, un assez fort taux de générer une animation fluide. Depuis votre animation prend beaucoup de temps, vous pourriez être en mesure de modifier la fonction animate de sorte que le taux de l'animation produit peut être réglé via une option. Dans votre cas vous ne devez mettre à jour environ toutes les 250ms puisque vous êtes couvrant environ 3-4 pixels par seconde, à peu près.

Answer 3

Les gens ont mentionné le ralentissement du taux de rafraîchissement de jQuery. Vous pouvez remplacer la fonction timer dans jQuery 1.4 avec ce fichier (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);
    }
}
 

Donc, modifiez la ligne avec cela dedans

 jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 50);
 

Changer le 50 à tout intervalle que vous voulez. C'est en millisecondes (ms)

Si vous enregistrez ce code dans un fichier différent, vous pouvez le joindre comme ceci:

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

Answer 4

jQuery animate utilise le javascript de la fonction "setInterval" pour mettre à jour le obects toutes les quelques millisecondes. Malheureusement, l'intervalle de jQuery est par défaut "13ms'. C'est 76 mises à jour chaque seconde. Façon de beaucoup de lenteur et de la moyenne des animations.

Le 13ms sont codés en dur dans jQuery. Vous pouvez directement modifier cette valeur dans la jQuery.js seulement. Si vous n'avez que la lenteur des nuages, vous pouvez aller jusqu'à 100ms. Si vous avez un peu plus vite d'animations, aussi, vous devez le régler à 50.

Vous pouvez modifier le paramètre de setInterval(); dans la fonction personnalisée. 'jQuery.fx.prototype { ... personnalisé: function() { ... } ... }'

Answer 5

Les animations impliquent des opérations en boucle, et celles-ci satureront le processeur quoi qu'il arrive.

Je ne sais pas à quel point il est facile de faire avec jQuery, mais il faut que l'animation consomme moins de cycles. Soit vous faites un peu plus irrégulier l’ani (l’affichage n’est pas aussi lisse), le bouclage doit être optimisé, ou vous réduisez le travail de l’ani.

40 secondes? N'est-ce pas un peu long pour une animation? Je pensais qu'ils sont censés être un peu plus immédiats que cela.