Estoy ejecutando una aplicación angular con un escenario Konva con algunas formas e imágenes en movimiento. Noté que cuando el navegador se desenfoca y vuelve a enfocarse, todo el escenario se congela y la CPU del monitor de rendimiento en las herramientas de desarrollo de Chrome se pone al 100 % durante unos segundos. Profiler mostró que aproximadamente 580 ms es decodificación de imagen (pintura) y aproximadamente 1000 ms es sistema.
Sin embargo, cuando el navegador permanece desenfocado, el monitor de rendimiento no muestra cambios significativos como cuando permanece enfocado y las formas se mueven suavemente.
¿Alguien sabe qué podría causar este retraso en el rendimiento al volver a la ventana? Lo primero que pensé fue que podría ser el lienzo o algo interno en Konva que comienza a actualizarse nuevamente y que se detuvo mientras el navegador estaba fuera de foco ...
Tal vez pueda consultar la lista de consejos de rendimiento de HTML5 Canvas All Konva .
Optimice el tamaño del escenario: siguiendo la regla de "dibujar lo menos posible", intente evitar crear un escenario grande porque mover todos esos bytes de la memoria a la pantalla tendrá un impacto negativo. ¡Aquí hay algunos consejos que ofrecen enfoques alternativos al problema del mega escenario!
Configure una ventana gráfica en dispositivos móviles: escalar imágenes es un impacto significativo en el rendimiento, por lo que para aplicaciones móviles configure la ventana gráfica:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">lo que evitará el escalado innecesario de su salida Konva.
Use
Konva.pixelRatio = 1en dispositivos retina: Konva maneja automáticamente los ajustes de proporción de píxeles para generar dibujos nítidos en todos los dispositivos. Pero, en caso de que tenga un mal rendimiento en los dispositivos retina, configureKonva.pixelRatio = 1para reducir el trabajo de escalado que tiene que hacer Konva. Esta configuración puede afectar la salida en algunos casos, así que asegúrese de que la calidad del resultado sea adecuada para usted.