Canvas与img——性能比较

Question

我试图寻找一些相关的来源，但没有找到任何信息。

因此，我的问题很简单。canvas比img更快吗？我将使用对象作为img（png，gif）或canvas。

1. 对象仅使用一次，
2. 同一对象的多次使用，例如管理员图标，
3. 不同对象的多次使用，例如公司标志。

我对内存使用、浏览器性能和加载速度感兴趣。

编辑#1：canvas由js绘制，与img标签中的图像相同。

- mihairu_cz

---

您的意思是在<canvas>上绘制与<img>标签不同吗？“更快”的方式是指下载速度还是渲染速度？ - deceze

是的，我的意思是...我会编辑问题，谢谢。 - mihairu_cz

在几乎所有情况下，这完全不是问题。当你需要画布时，请使用 canvas；当你需要图像时，请使用 img。根据你的需求进行选择，并且仅在有必要时进行优化。请记住不要改变原来的意思。 - JJJ

这个问题询问两个非常常见的HTML元素的性能，我不明白为什么它被关闭为过于局部化。 - Daniel Imms

Answer 1

不，img 比使用 canvas 更快、更易创建且更易访问。如果只需要显示图像，则应使用 img 标签，因为它的设计目的就是用于此用途。多个使用不应该有影响，因为图像只会下载一次。

如果需要某些动画或交互性，则可以考虑使用 canvas。

- Daniel Imms

---

img更快吗？你能解释一下为什么吗？ - Robula

@Robula img 是专门用于绘制图像的，所有内容都在本地代码中处理。对于一个 canvas，你需要创建 DOM 元素，以某种方式获取图像（可能通过 img 元素），然后进行绘制。它们被设计成通用画布，用于绘制各种各样的东西，而 img 则更适合仅绘制图像。 - Daniel Imms

感谢您的澄清。我曾认为Canvas可能更加高效，因为它利用了WebGL技术。 - Robula