Javascript img标签元素与具有背景图像的div之间的性能差异？

在img标签和具有图像背景的DIV中显示图像时，性能或加载/缓存行为是否存在任何差异

我的例子：

---

我有一个有许多重叠图像的站点，其中一些图像需要使用javascript动态加载。一个问题是，我需要将图像锚定到元素的右侧，这样我就可以很好地擦除到正确的效果。正因为如此，我使用了一个背景图像位于右侧的div。我不知道如何使用img来实现这一点，但因为DIV对我来说很有用，我不知道这是否重要……

AFAIK，浏览器缓存图像时，无论是在DIV还是img中，都是一样的。在任何情况下，我认为这是一种特定性能被定义为每个渲染引擎（可能还有围绕它们构建的浏览器）内部的实现细节的情况。因此，作为设计师/开发人员，它既不受我们的控制，也会随着浏览器和版本的变化而变化。换句话说，我不会花太多时间担心它。

我能想到的唯一区别是：

您不能将图像缩放为背景，尽管您可以为img标记缩放图像。这将打开一个场景，背景图像加载更快，因为它迫使您拥有正确的本机大小，而不是下载整个图像并缩放它。然而，反过来可能是正确的：考虑到您不太关心图像质量，您可以将较小的img发送到页面并将其放大

---

我会坚持使用任何渲染的清洁剂（并且更加一致——IE/FF/Chrome/Safari/etc）。

技术差异是的，最值得注意的是，您可以设置IMG标记的宽度/高度，它将拉伸图像，这在某些情况下可能很有用

---

不过，您必须记住的主要内容是HTML文档中图像的上下文。如果图像是内容，比如说图库中的图像，我会使用IMG标签。如果它只是界面的一部分，我可能会使用div来代替。

主要的性能差异是使用背景图像允许您使用CSS精灵。如果一个图像包含页面中的大量图像，则意味着用户只需对每个图像发出一个请求，而不是一个请求。

另一个区别在于响应性布局。如果您有一个元素仅以特定的屏幕宽度显示（即，在移动电话上不显示），则如果在html中指定该元素，它仍将加载该图像（例如使用display:none），但如果该元素是在未使用的媒体查询CSS规则中指定的背景图像，则大多数浏览器现在都不会加载该图像。许多早期的响应性布局受到批评，因为它们仍然使用与全尺寸站点相同的带宽

---

它对于此类设计也很有用，因为您可以轻松地为不同的屏幕大小指定不同的图像。如果没有2倍分辨率的图形，平板电脑甚至笔记本电脑上的“视网膜”显示器将无法达到最佳效果。所以即使你现在不做这些事情，这可能是一个很好的实践，因为你可能很快就会发现自己需要它

我认为，通过在div中使用background image属性，页面布局首先被加载，而在加载dom之后，div中的图像将被加载。因此，通过使用背景图像，可以更快地在web浏览器上加载html布局。

在CSS3中，可以缩放背景图像。有关示例，请参见。也就是说，您提出了一个关于语义差异的极好观点：当图像是页面内容的重要部分时，IMG通常是更好的选择，而当图像只是装饰性的或用于格式化时，CSS技术通常是首选。考虑到CSS3 background size属性，这不再是正确的