Realice cambios en el rendimiento de Canvas a partir de evidencia

Crea una escena de estrés repetible

Cree un estado de prueba con una cantidad conocida de objetos en movimiento, efectos superpuestos y etiquetas de texto. Capture una grabación o una semilla fija para que cada ejecución presente aproximadamente el mismo trabajo. Compare una línea de base de una escena vacía con una escena abarrotada y luego inspeccione si se dedica tiempo a las actualizaciones de JavaScript, al dibujo del lienzo, a la decodificación de imágenes o al trabajo de estilo y diseño.

Si lo que más cuesta es dibujar, prueba a agrupar trazados similares, reducir cambios de estado innecesarios o renderizar solo las regiones que cambiaron. Si domina la lógica de actualización, analiza las comprobaciones de colisión y los recorridos de objetos. La guía de optimización de Canvas de MDN presenta estas técnicas como opciones que hay que evaluar, no como interruptores universales que garanticen más velocidad.

Cambiar un costo y verificar el resultado.

Elige un coste sospechoso, como volver a dibujar un fondo estático. Guárdalo en caché en un canvas fuera de pantalla y compara el resultado antes y después con la misma escena. Comprueba la imagen en varios tamaños y después de cambiar el tamaño: la caché puede quedar desfasada si conserva dimensiones antiguas o escala el texto de otra manera.

Registre el dispositivo, navegador, escena y acción utilizados para la comparación. Un resultado de una máquina es útil para diagnosticar esa ejecución, pero no establece el rendimiento para cada navegador o dispositivo. Vuelva a probar la interacción original, porque una optimización que mejora una escena sintética aún puede hacer que la entrada se sienta peor en otros lugares.

Preguntas sobre ⁨rendimiento del juego de lienzo⁩