performance - Canvas vs DOM——HTML5中最高效的图片展示方式是什么？

Question

StackOverflow 用户

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

只要我们只是在谈论呈现图像，那么使用 Canvas 并在其上绘制图像而不是使用 DOM 元素 标签有什么意义吗？ 还将有一些图像处理，如 CSS3 转换/移动/缩放/缩放和手势识别(拖动、触摸/点击、可能捏等)，据我所知，它们适用于 Canvas 和 img标签。

保持尽可能多的“html5”风格并考虑性能也很重要。 例如， future canvas 元素是否会被浏览器越来越多地使用和优化，以及目前 是否更快也很重要。

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

关于这个特定方面是否有任何资源/研究？

Answer 1

UseCanvas = NeedCanvas ? true : false

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

使用 <img>带有 javascript 的标签不仅会增加兼容性，还会增加速度和可访问性——绝对所有带有浏览器的东西都可以运行 CSS 和 Javascript。此外还有 SEO 因素，我很确定 Canvas 中的图像不会被编入索引。

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