Descubrí que al ejecutar Css3 Animation y RequestAnimationFrame (sin cambiar DOM) al mismo tiempo, Recalculate Style se activará cada vez, lo que significa que la aceleración de GPU no funciona, ¿verdad? ¿Es un error?

Cuando solo se ejecuta con animación css3, la aceleración de GPU funciona bien, todo es perfecto.

Rendimiento: solo Css3 giratorioZ

Al iniciar requestAnimationFrame, verá que Recalculate Style se activó cada vez.

Rendimiento - Css3 rotateZ + requestAnimationFrame

Detener la animación Css3 (solo requestAnimationFrame), el Recalculate desapareció ~

ingrese la descripción de la imagen aquí

Código principal de la siguiente manera:

 @keyframes rotate { 0% { transform: rotateZ(0deg); } to { transform: rotateZ(359deg); } } .ring { display: none; width: 80px; height: 80px; margin: 24px auto; border: 2px solid transparent; border-top-color: red; border-radius: 50%; display: block; }

 const toggleCss = document.querySelector("#toggleCss"); toggleCss.addEventListener("click", function () { document.body.classList.toggle("loading"); if (document.body.classList.contains("loading")) { toggleCss.innerText = "Stop Css3 Animation"; } else { toggleCss.innerText = "Start Css3 Animation"; } }); let running = false; function tick() { if (running) { requestAnimationFrame(tick); } } tick(); const toggleRaf = document.querySelector("#toggleRaf"); toggleRaf.addEventListener("click", function () { if (running) { running = false; toggleRaf.innerText = "Start requestAnimationFrame"; } else { toggleRaf.innerText = "Stop requestAnimationFrame"; running = true; tick(); } });

Vea el ejemplo en línea aquí: https://yfkyv.csb.app/

Códigos y caja: https://codesandbox.io/s/relaxed-andras-yfkyv?file=/src/index.js