Canvas versus DOM: ¿Cuál es el método de visualización de imágenes más eficiente en HTML5?

Question

usuarios stackoverflow

Al hacer una aplicación HTML5/sitio web, para los casos tales como una galería de imágenes, donde un gran número de imágenes se visualizan secuencialmente o al mismo tiempo en el navegador, es el uso del elemento canvas justificado ?

Mientras solo estamos hablando de presentar una imagen, ¿tiene sentido utilizar un lienzo y dibujar la imagen en él en lugar de utilizar el elemento DOM < img> tag? También habrá manipulación de la imagen, como las transformaciones/movimiento/escala/zoom de CSS3 y el reconocimiento de gestos (arrastre, toque/toque, tal vez pellizco, etc.) que, hasta donde yo sé, son aplicables tanto al lienzo como al etiquetas img

También sería importante mantener las cosas lo más "html5" -ish posible y también teniendo en cuenta el rendimiento. Por ejemplo, importaría si en el futuro el elemento de lienzo será cada vez más utilizado y optimizado por los navegadores y también importaría si por el momento el < img> es mucho más rápido.

Como estamos considerando desarrollar una aplicación universal html5, trabajando en computadoras de escritorio y también en dispositivos móviles, el rendimiento y la velocidad son un factor muy importante. Sin embargo, las pruebas que comparaban canvas y < img> tenían como objetivo principalmente los juegos de navegador JavaScript. En este caso, la animación no es tan importante como el consumo de memoria y el rendimiento general.

¿Existen recursos/estudios con respecto a este aspecto en particular?

Answer 1

UseCanvas = NeedCanvas ? true : false 

Realmente no necesita lienzo para esta operación, y tardará más tiempo en desarrollarse con lienzo, ya que es mucho más complicado.

El uso de las etiquetas <img> con javascript no solo aumentará la compatibilidad sino también la velocidad y la accesibilidad: absolutamente todo con un navegador puede ejecutar CSS y Javascript. Además, también hay factores de SEO, estoy bastante seguro de que las imágenes de un lienzo no se indexarán.

No utilice la tecnología HTML5 para utilizar la tecnología HTML5. Cuando desee comenzar a deformar las imágenes y hacer que el usuario dibuje sobre ellas para que pueda exportar/guardar, allí es donde necesita un lienzo.