使用canvas代替img有什么好处？

Question

我目前正在构建一个移动应用程序，我只是想知道使用 canvas 或 img 标签是否更好（性能方面）。我将在我的网站上查询实际图像。只是想知道其中一种是否比另一种有好处。

Answer 1

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

为了让浏览器在屏幕上绘制图像，他们需要：

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

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

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

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

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