Recuerda a suscribirte
No mas setInterval
Hace no mucho tiempo, la única alternativa para poder ejecutar nuestro bucle de juego, era anidar setTimeout recursivamente o simplemente llamar a setInterval, pero estas nunca fueron ni de cerca la mejor alternativa, simplemente eran las únicas. En este punto nos podemos preguntar, ¿Cual de las dos es mejor? definitivamente setInterval es más eficiente que setTimeout, pero eso no significa que la primera este libre de problemas.
requestAnimationFrame
Esta función fue inicialmente introducida por la gente de Mozilla y pronto fue adoptada por los demás navegadores, anteriormente el uso de las ya mencionadas "setTimeout" y "setInterval" requerían que el desarrollador se encargara de ajustar la frecuencia de los cuadros para que el juego o animación en cuestión, se ejecutase correctamente, te recomiendo ver el video de arriba para que veas un ejemplo práctico del uso de esta función.
La frecuencia de los cuadros con "requestAnimationFrame" es ajustada directamente por el navegador, lo que permite simplificar el desarrollo, esta puede llegar hasta unos 60 cuadros por segundo, a continuación veremos algunos problemas causados por "setInterval" para que entendamos mejor la ventaja de usar "requestAnimationFrame"
Las colas y el exceso de memoria
A "setInterval" no le importa si el navegador esta listo, o no, para ejecutar el siguiente cuadro de animación o juego, su segundo parámetro realmente no nos dice cuando será llamada la función, simplemente nos dice cuando esta será agregada a la cola, si el navegador está muy ocupado, "setInterval" continuará agregando llamadas a nuestra función de cuadros a la cola, lo que se traduce en un excesivo e innecesario uso de la memoria, si se está ejecutando en un dispositivo móvil esto se traducirá en consumo de batería. Cuando hacemos una llamada a nuestra función de cuadro con requestAnimationFrame, esta se encarga de preguntarle al navegador si es posible renderizar el cuadro o no, evitando así acumular peticiones en cola alguna.
El navegador no es vidente
Con "setInterval" no es posible saber que se va a llevar a cabo, ya que esta función fue creada con un propósito muy genérico, en cambio "requestAnimationFrame" le informa al navegador la intención de realizar una animación, lo que permite al navegador optimizar sus prioridades lo mas posible, resultando en ejecuciones mas fluidas y menos propensas a retrasarse.
Las animaciones solo son relevantes si se pueden ver
Con eso dicho, si minimizamos o cambiamos de pestaña, el navegador reducirá la prioridad para nuestro juego o animación, por lo que se evitará el exceso de consumo en recursos, esto no necesariamente tiene que ser así con "setInterval".
Descargar archivos del tutorial
A continuación en los siguientes enlaces podrás descargar los archivos usados en el videotutorial, códigos fuentes e imágenes.
Instrucciones de descarga: Luego de hacer clic, se abrirá otra pestaña, debes esperar unos segundos a que aparezca el botón con el texto: "Saltar publicidad", debes hacer clic en ese botón y se abrirá nuevamente otra pestaña con el archivo deseado para que lo descargues
Plantilla HTML: Documento html con etiqueta canvas y el estilo css
Código fuente final: Ejemplo completo de lo hecho en el video tutorial
Imagenes usadas: Para el botón play y pausa
No hay comentarios:
Publicar un comentario