He pasado un montón de números en drawi hechos en HTML ng versus dibujo hecho en lona. Podría hacer una gran publicación sobre los beneficios de cada uno, pero daré algunos de los resultados relevantes de mis pruebas para su aplicación específica:
Hice páginas de prueba de Canvas y HTML, ambas tenían "nodos" móviles. Los nodos de lienzo fueron objetos que creé y seguí en JavaScript. Los nodos HTML eran <div> s, aunque también podían ser <image> o .
Agregué 100.000 nodos a cada una de mis dos pruebas. Se comportaron de forma bastante diferente:
La pestaña de prueba HTML tardó en cargarse (cronometrada en poco menos de 5 minutos, Chrome solicitó que se mate la página la primera vez). El administrador de tareas de Chrome dice que esa pestaña está tomando 168MB. Toma 12-13% de tiempo de CPU cuando lo miro, 0% cuando no estoy buscando.
La pestaña de lienzo se carga en un segundo y ocupa 30 MB. También ocupa un 13% del tiempo de CPU todo el tiempo, independientemente de si uno lo está mirando o no.
Arrastrar en la página HTML es más suave, lo que supongo que se espera, ya que la configuración actual es volver a dibujar TODO cada 30 milisegundos en la prueba Canvas. Hay muchas optimizaciones para Canvas para esto. (la invalidación del lienzo es la más fácil, también las regiones de recorte, redibujado selectivo, etc.solo depende de cuánto te apetezca implementar)
Video en la página HTML, mientras que no estoy moviendo objetos, es realmente perfectamente liso.
Sobre lienzo el video siempre es lento, ya que estoy redibujando constantemente porque apagué la invalidación de mi lienzo de dibujo. Por supuesto, hay mucho margen de mejora.
Dibujar/cargar solo es ahora más rápido en Canvas y tiene mucho más espacio para optimizaciones, también (es decir, excluir las cosas que están fuera de la pantalla es muy fácil).
¿Tiene una demostración que podría proporcionar para cada uno como ejemplos? – Steropes