0
99
VistasAndroid Chrome ejecuta requestAnimationFrame a 60FPS pero se renderiza a 30FPS
Estoy creando un juego con JS y lo estaba probando en Android Chrome y noté que no funcionaba bien, pude ver tartamudeos. Entonces, me propuse solucionar los problemas de rendimiento pensando que mi código no está optimizado.
Comencé a depurar el juego usando el medidor de FPS incorporado de Chrome y noté que se estaba renderizando a 30 FPS. Luego comencé a comentar partes del juego hasta que pude subirlo a 60 FPS pero no pude. Al final, me quedé con este código:
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; var loop = function() { ctx.fillRect(0, 0, 10, 10); console.log(new Date().getSeconds()); requestAnimationFrame(loop); } loop(); requestAnimationFrame llamando a una función casi vacía, pero aún renderizando a 30 FPS. Pero la función loop se llamó 60 veces por segundo. Aquí está la captura de pantalla que muestra ambos: 
También puedes ponerte a prueba aquí: https://replit.com/@laltin/DearAmusingPackages
Mi pregunta es ¿por qué hay una diferencia entre la cantidad de llamadas de requestAnimationFrame y la cantidad de renderizaciones y cómo puedo hacer que se renderice a 60FPS?
1 Respuestas
Responde la pregunta0
Según los documentos de MDN aquí :
La cantidad de devoluciones de llamada suele ser de 60 veces por segundo, pero generalmente coincidirá con la frecuencia de actualización de la pantalla en la mayoría de los navegadores web según la recomendación de W3C
Por lo tanto, la devolución de llamada puede activarse unas 60 veces por segundo, pero la pantalla real se actualiza a un ritmo diferente. Determinar el motivo de la frecuencia de actualización real del dispositivo Android parece ser un poco complicado. Están las especificaciones del dispositivo y probablemente un montón de otras cosas que afectan el FPS.