JavaScript setTimeout () ralentit sous une charge importante

Question

J'ai créé un script qui atténue la couleur de fond d'un élément. J'utilise setTimeout () pour apporter une modification incrémentielle à la couleur toutes les 5 ms. Le script fonctionne très bien si je ne fais que fondre la couleur de fond d’une chose à la fois, mais si, par exemple, j'ai 50 éléments, je passe tous en fondu à la fois, la vitesse est beaucoup plus lente que 5 ms à cause de tout. la setTimeout () simultanée en cours d'exécution à la fois. Un fondu qui devrait normalement s’exécuter en 1 seconde, par exemple, peut prendre 30 secondes si je fondus simultanément 50 éléments.

Avez-vous des idées pour surmonter ce problème?

Voici le script au cas où quelqu'un aurait une idée:

function fadeBackground(elementId, start, end, time) {
    var iterations = Math.round(time / 5);

    var step = new Array(3);

    step[0] = (end[0] - start[0]) / iterations;
    step[1] = (end[1] - start[1]) / iterations;
    step[2] = (end[2] - start[2]) / iterations;

    stepFade(elementId, start, step, end, iterations);
}

function stepFade(elementId, cur, step, end, iterationsLeft) {
    iterationsLeft--;

    document.getElementById(elementId).style.backgroundColor
        = "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")";

    cur[0] = Math.round(end[0] - step[0] * iterationsLeft);
    cur[1] = Math.round(end[1] - step[1] * iterationsLeft);
    cur[2] = Math.round(end[2] - step[2] * iterationsLeft);

    if (iterationsLeft > 1) {
        setTimeout(function() {
            stepFade(elementId, cur, step, end, iterationsLeft);
        }, 5);
    }
    else {
        document.getElementById(elementId).style.backgroundColor 
            = "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")";
    }
}

Il est utilisé comme ceci:

fadeBackground("myList", [98,180,232], [255,255,255], 1000);

Answer 1

Voici un article . de Google où l'auteur discute de son travail sur les minuteries pour Gmail. Ils ont constaté qu’avoir une minuterie haute fréquence unique était plus rapide que d’utiliser plusieurs minuteries si leur utilisation était lourde et rapide.

Vous pouvez avoir un minuteur qui se déclenche toutes les 5 ms et ajouter tous vos éléments devant être fondus à une structure de données qui enregistre leur emplacement dans le processus de fondu. Ensuite, votre minuteur pourra parcourir cette liste et effectuer le fondu suivant pour chaque élément à chaque déclenchement.

D'autre part, avez-vous essayé d'utiliser une bibliothèque telle que Mootools ou JQuery plutôt que de lancer votre propre framework d'animation? Leurs développeurs ont beaucoup travaillé à l’optimisation de ce type d’opérations.

Answer 2

Tout d’abord, votre script ne tient pas compte du fait que le délai d’expiration minimal est généralement de 10 à 15 ms, selon le navigateur. Vous pouvez voir mon message sur ce sujet . À l'intérieur, vous trouverez un tableau pour les navigateurs populaires et un lien vers le programme qui le mesure, afin que vous puissiez vérifier la demande vous-même. Je suis désolé de le dire, mais des itérations toutes les 5 ms constituent un voeu pieux.

Deuxièmement, les minuteries ne sont pas des interruptions. Il n'y a pas de magie en eux & # 8212; ils ne peuvent pas interrompre ce qui est en cours d'exécution dans le navigateur et exécuter leur charge utile. Au lieu de cela, ils seront différés jusqu'à ce que le code en cours d'exécution se termine et que le navigateur récupère le contrôle et la possibilité d'exécuter des minuteries. La décoloration de 50 éléments prend du temps, et je parie qu’elle dure plus de 5 ms, surtout si vous prenez en compte l’ensemble du modèle différé du navigateur: vous mettez à jour DOM, et le navigateur mettra à jour sa représentation visuelle & # 8230; à un moment donné.

Je veux terminer sur une note positive:

• Au lieu de supprimer 50 éléments distincts, essayez de les regrouper et de réduire leur (2) cela peut être plus rapide.
• Soyez plus créatif avec l'interface utilisateur. Essayez de trouver une solution qui ne nécessite pas la suppression de nombreux éléments indépendants à la fois.
• Vérifiez toujours que vos hypothèses d'arrière-plan sont correctes avant de concevoir autour d'elles.
• Si vous le pouvez, essayez de cibler les navigateurs modernes. D'après mon expérience personnelle, Google Chrome fonctionne très bien avec les minuteries et son moteur JavaScript (V8) est extrêmement rapide.

Answer 3

Outre les autres réponses, voici un excellent article de John Resig sur les minuteries: http://ejohn.org/blog/how-javascript-timers-work/