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

Posted 2023-03-05

【中文标题】Canvas 与 DOM - HTML5 中最有效的图像显示方法是啥？

【英文标题】：Canvas versus DOM - What is the most efficient image display method in HTML5?Canvas 与 DOM - HTML5 中最有效的图像显示方法是什么？

【发布时间】：2012-06-12 15:48:55

【问题描述】：

*** 用户

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

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

尽可能多地保留“html5”-ish 并考虑性能也很重要。 例如，将来画布元素是否会被浏览器越来越多地使用和优化会很重要，而 是否会更快也很重要。

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

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

【参考方案1】：

UseCanvas = NeedCanvas ? true : false

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

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

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

【讨论】：

搜索引擎优化在这里并不是一个真正的因素，只有性能。我同意你所说的不使用 HTML5 只是为了使用它。事情是我还必须考虑到将来可能会有所帮助的东西，我们都知道 html5 是未来。当然，没有人知道未来会怎样，但我注意到使用画布的类似应用程序，这让我想知道为什么以及是否比明显使用

有任何优势

@BogdanBucur - img 和 canvas 一样多的 HTML5！它是 HTML4 的一部分，HTML5 建立在它之上。它与其他任何事物一样，都是“未来”的一部分。

@BogdanBucur <img> 是 HTML 的基本部分，它不会出现在任何地方永远。你所描述的是一个非常简单的图片库，canvas 是真正用于游戏的，除非你正在构建一个包含循环、物理、状态等的复杂游戏，否则根本不需要使用它。我建议您查看一些 jQuery 示例以了解它的强大功能，然后您会意识到您不需要它来实现您提到的效果。

大声笑，不，这不是关于 img 变得过时。我们真正需要做的是更多的高级目录，图片库是功能的基本示例。我看了很多例子，过去我也使用过 jQuery，只是这些例子中的大多数，如你所说，主要用于游戏，而不是像我这样的简单案例。

在移动开发的范围内，我认为这是一个非常重要的问题。如果 canvas 元素以某种方式比 img 元素更好地管理内存，那将是移动 html5/js 应用程序的福音。我记得在某处读到画布元素能够使用 opengl 进行渲染（依赖于浏​​览器）。我认为 OpenGL 将拥有比 javascript 更快的内存处理方式。目前 OpenGL 在移动设备上可能并不普遍，但需要考虑。