0

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

4

3 回答 3

4

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

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

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

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

画布有什么不同：浏览器不会回收画布内部的解码信息。所以通过使用画布来渲染图像，我们避免了不必要的解码。

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

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

于 2014-05-08T02:27:48.213 回答
2

不！如果您正在显示静态内容，<canvas>则速度较慢且更加迟钝。<canvas>并<img>做完全不同的事情，前者用于使用 JavaScript 的动态图形，后者用于从 URI 检索的静态图像。

于 2012-06-07T02:55:54.890 回答
0

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

如果您想对图像做一些花哨的事情，为什么不将图像加载到 IMG 标记中，然后在加载后将其转换为画布以进行转换？

于 2012-06-08T09:51:57.937 回答