javascript - w3schools - Multiple requestAnimationFrame performance

requestanimationframe w3schools

Question

Si estoy haciendo múltiples animaciones, ¿está bien en cuanto al rendimiento agregar varias requestAnimationFrame llamada requestAnimationFrame ? F.ex:

function anim1() {
    // animate element 1
}

function anim2() {
    // animate element 2
}

function anim3() {
    // animate element 3
}

requestAnimationFrame(anim1);
requestAnimationFrame(anim2);
requestAnimationFrame(anim3);

¿O está probado que es peor que usar una sola devolución de llamada?

(function anim() {
    requestAnimationFrame(anim);
    anim1();
    anim2();
    anim3();
}());

Lo estoy preguntando porque realmente no sé lo que está sucediendo detrás de escena, ¿ requestAnimationFrame cola las devoluciones de llamada cuando lo llamas varias veces?

Answer 1

Debería usar solo una llamada requestAnimationFrame como las llamadas a requestAnimationFrame do stack. La única versión de devolución de llamada es, por lo tanto, más eficiente.

Answer 2

El requestAnimationFrame enlaza una llamada de función y devuelve el frameID. Solicitar marcos múltiples NO es lo mismo que agregar múltiples oyentes de eventos a un evento: cada función se llama en otro marco. Por lo tanto, si continuamente (cada función se recuerda de forma recursiva) solicita varios marcos, está perdiendo el beneficio de que todas las actualizaciones se procesan dentro de un marco. Así que incluso si hay una alta velocidad de fotogramas, las animaciones pueden no verse tan suaves.

Pero: solo puede usar cancelAnimationFrame (frameID) para todos los métodos y puede necesitar algún código adicional para cancelar animaciones individuales