Fondo

Mientras trabajaba en una animación 2D compleja a pantalla completa utilizando varias capas <canvas> , descubrí un problema con Safari. El rendimiento de la representación cae bruscamente después de que el lienzo se vuelve más grande que exactamente 3840x3840. Realicé varias pruebas (punto de referencia que escribí: https://codepen.io/kiler129/full/Exbgrqp ) y obtuve este peculiar gráfico:

(haga clic para obtener una copia legible a tamaño completo)

Análisis de los datos

• Se mantienen 60 FPS/tiempo real constantes hasta 3840x3840, luego baja a 2-25 FPS inutilizables
• Hay una correlación entre un mayor porcentaje de relleno (100 % frente a 20 %) del lienzo y FPS, así como una mayor cantidad de llamadas de dibujo por cuadro ( d/f ) y FPS -> nada inusual aquí, es bastante lineal
• Los lienzos almacenados en búfer (dibujar fuera de la pantalla y luego copiar) tienen un rendimiento mucho menor para operaciones simples
• Brave, y cualquier otro navegador basado en Chromium, mantiene 60 FPS constantes básicamente para siempre (incluso con un plano de pantalla de 10000x10000 escalado)
• El iPad 2018 con Safari se comporta de manera idéntica al MBP 2021 con M1 Max, solo un poco más lento en general
• El 3840px es exactamente 4K. Si bien tengo un monitor 4K, desconectarlo y reiniciarlo no cambia el punto de caída empinado (MBP tiene una pantalla de 3456x2234). Incluso suponiendo que la resolución 4K esté almacenada en caché en algún lugar, esto no explica la misma caída en el iPad que no tiene nada que ver con las pantallas 4K.

También verifiqué lo que realmente toma tiempo en Safari y parece que la representación en la pantalla y no el dibujo real en el lienzo es el culpable. Eso explicará por qué el uso del almacenamiento en búfer da tan malos resultados. Los tiempos de dibujo son en realidad más lentos en los navegadores basados en Chromium, pero los tiempos apenas se correlacionan con nada:

¿Por qué un lienzo tan grande?

Para evitar la situación del problema XY, respondo esto con anticipación. Me topé con este problema en una prueba del mundo real y luego preparé el punto de referencia tratando de eliminar todas las variables de la aplicación del mundo real. 3840px es perfectamente razonable cuando se usa en pantallas HiDPI/"retina"; con una escala x2, proporciona un espacio de pantalla de 1920 px, lo cual es bastante normal. Mientras que el punto de referencia recorta la ventana gráfica, el código real no lo hace (no parece hacer una diferencia medible).

¿Insecto?

¿Hay algo que pueda hacer aquí, o esto es una especie de limitación/error de WebKit/Safari? Durante la prueba, Safari no falla, pero la ventana deja de responder hasta que se detiene la representación.

La única solución que veo es detectar la caída de FPS y deshabilitar el escalado de retina en Safari.