JavaScript setTimeout () se ralentiza bajo una carga pesada

Question

He creado un script que desvanece el color de fondo de un elemento. Uso setTimeout () para hacer un cambio incremental al color cada 5 ms. La secuencia de comandos funciona muy bien si solo estoy desvaneciendo el color de fondo de una cosa a la vez, pero si tengo, por ejemplo, 50 elementos, todo se desvanece a la vez, la velocidad es mucho más lenta que 5 ms debido a todo el setTimeout () s concurrente se ejecuta a la vez. Un desvanecimiento que normalmente debería ejecutarse en 1 segundo, por ejemplo, puede tardar 30 segundos si desvanezco 50 elementos a la vez.

¿Alguna idea de cómo puedo superar esto?

Aquí está el guión en caso de que alguien tenga alguna idea:

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] + ")";
    }
}

Se utiliza de esta manera:

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

Answer 1

Aquí hay un artículo de Google, donde el autor analiza su trabajo sobre los temporizadores para Gmail. Descubrieron que tener un solo temporizador de alta frecuencia era más rápido que usar múltiples temporizadores si tenían un uso intenso y rápido del temporizador.

Podría tener un temporizador que se dispara cada 5 ms, y agregar todos los elementos que deben desvanecerse a una estructura de datos que rastree dónde se encuentran en el proceso de desvanecimiento. Luego, su temporizador puede revisar esa lista y realizar el siguiente desvanecimiento de cada elemento cada vez que se active.

Por otra parte, ¿has intentado usar una biblioteca como Mootools o JQuery en lugar de rodar tu propio marco de animación? Sus desarrolladores han trabajado mucho para optimizar este tipo de operaciones.

Answer 2

En primer lugar, su secuencia de comandos no tiene en cuenta que el tiempo de espera mínimo suele ser de 10 a 15 ms, según el navegador. Puede ver mi publicación sobre este tema . Dentro encontrarás una tabla para los navegadores populares y un enlace al programa que la mide, para que puedas verificar la reclamación por ti mismo. Lamento decirlo, pero cada 5 ms es una ilusión.

En segundo lugar, los temporizadores no son interrupciones. No hay magia en ellos & # 8212; no pueden interrumpir lo que se está ejecutando en el navegador y ejecutar su carga útil. En su lugar, serán aplazados hasta que el código en ejecución termine y el navegador recupere el control y la capacidad de ejecutar los temporizadores. El desvanecimiento de 50 elementos lleva tiempo, y apuesto a que es más de 5 ms, especialmente si tiene en cuenta todo el modelo diferido del navegador: actualiza DOM y el navegador actualizará su representación visual & # 8230; en algún momento en el tiempo.

Quiero terminar con una nota positiva:

• En lugar de desvanecer 50 elementos individuales, intente agruparlos y desvanecer a sus padres & # 8212; puede ser más rápido.
• Sé más creativo en la interfaz de usuario. Trate de encontrar una solución que no requiera desvanecer muchos elementos independientes al mismo tiempo.
• Siempre verifique que sus suposiciones de fondo sean correctas antes de diseñar en torno a ellas.
• Si puedes, intenta apuntar a los navegadores modernos. Desde mi experiencia personal, Google Chrome es muy bueno con los temporizadores, y su motor de JavaScript (V8) es extremadamente rápido.

Answer 3

Además de las otras respuestas, aquí hay un excelente artículo de John Resig sobre los temporizadores: http://ejohn.org/blog/how-javascript-timers-work/