使用canvas而不是img的好处？

Question

我目前正在构建一个移动应用程序，我只是想知道使用canvas或img标签是否更好（性能明智）。我将查询我的网站的实际图像。只是想知道一个人是否有利于另一个人。

Answer 1

主要好处是避免不必要的浏览器解码。

对于paint an image onto screen的浏览器，他们需要：

1. 检索图像文件的编码内容
2. 将图像从原始JPEG，GIF，PNG或WebP格式解码为内存中的位图
3. 将其绘制到屏幕上

用户滚动和调整大小时会出现性能问题。解码特别昂贵。然而，当我们向上和向下滚动页面时，浏览器会尝试检索先前由off-screen images占用的内存（即当前滚动区域之外的内容）。这意味着每当图像从屏幕边缘重新出现时，浏览器就必须再次经历相同的昂贵解码过程。当我们在很长的页面上溅出大量图像时，浏览器可能会在滚动时卡住。

canvas的不同之处在于：浏览器不会回收画布内的解码信息。因此，通过使用画布渲染图像，我们可以避免不必要的解码。

但是，当然，如果我的目标是移动设备，我会切换回图像标签，让浏览器完成工作，因为内存不足。

我认为这是一种特定于浏览器的策略，用于处理解码图像和有限内存之间的冲突。我更具体地谈论了Chrome，因为该过程在时间轴开发工具中可见。

Answer 2

没有！如果您正在显示静态内容，<canvas>会更慢，更加迟钝。 <canvas>和<img>完全不同，前者用于使用JavaScript的动态图形，后者用于从URI检索的静态图像。

Answer 3

浏览器倾向于在HTML流式传输时优化加载IMG源：因此您将在页面完全加载之前看到图像。另一方面，Canvas将依赖于正在加载的DOM，因此（通常）在DOMContentLoaded事件触发之前不会加载。再加上创建Canvas上下文的延迟和内存要求，如果图像真的是静态的，几乎肯定不是你想要的。

如果你想对图像做一些奇特的事情，为什么不将图像加载到IMG标签中，然后在加载后将其转换为画布进行转换？