Canvas与DOM - HTML5中最有效的图像显示方法是什么？

Question

StackOverflow用户

制作html5应用程序/网站时,对于图像库这样的情况,在浏览器中顺序显示或同时显示大量图像,是否使用了canvas元素？

只要我们只讨论呈现图像,使用画布并在其上绘制图像而不是使用DOM元素<img>标签是否有任何意义？还会有一些图像处理,比如CSS3变换/移动/缩放/缩放和手势识别(拖动,触摸/点击,可能是捏等),据我所知,它们适用于画布和img标签.

同样重要的是尽可能多地保持"html5" - 并尽量考虑性能.例如,如果将来canvas浏览器元素将越来越多地被浏览器使用和优化,那么它是否重要,如果暂时<img>更快,那也很重要.

由于我们正在考虑开发通用的html5应用程序,在桌面和移动设备上工作,性能和速度是一个非常重要的因素.但是,比较canvas和<img>的测试主要针对javascript浏览器游戏.在这种情况下,动画并不像内存消耗和整体性能那么重要.

有关于这个特定方面的资源/研究吗？

Answer 1

UseCanvas = NeedCanvas ? true : false

这个操作确实不需要canvas，而且使用canvas开发会花费更长的时间，因为它要复杂得多。

使用<img>带有 javascript 的标签不仅会提高兼容性，还会提高速度和可访问性 - 绝对所有带有浏览器的东西都可以运行 CSS 和 Javascript。此外，还有搜索引擎优化因素，我很确定画布中的图像不会被索引。

不要为了使用 HTML5 技术而使用 HTML5 技术。当您想要开始扭曲图像并让用户在图像上绘图以便导出/保存时，这就是您需要画布的地方。