在 img 标签中显示图像与带有图像背景的 div 中显示图像时，性能或加载/缓存行为是否有任何差异？
我的例子：
我有一个包含许多重叠图像的网站，其中一些我需要使用 javascript 动态加载。一个问题是我需要将图像锚定到元素的右侧，这样我才能做出很好的向右擦除效果。因此，我使用了一个背景图像定位正确的 div。无法弄清楚如何用 img 做到这一点，但由于 div 对我有用，我不知道这是否重要......
【问题讨论】：
标签： javascript performance image html
AFAIK，无论是在 DIV 还是 IMG 中，浏览器都会缓存相同的图像。无论如何，我认为这是将特定性能定义为每个渲染引擎（可能还有围绕它们构建的浏览器）内部的实现细节的情况之一。因此，作为设计师/开发人员，它既不受我们的控制，也可能因浏览器和版本而异。换句话说，我不会花太多时间担心它。
【讨论】：
主要的性能差异是使用背景图像允许您使用 CSS 精灵。让一张图片包含来自您页面的大量图片意味着用户只需发出一个请求，而不是为每张图片发出一个请求。
【讨论】：
另一个区别是响应式布局。如果你有一个元素只在特定的屏幕宽度上显示（即，不在手机上），如果它在 html 中指定，它仍然会加载图像（例如使用 display:none），但现在大多数浏览器都会如果是未使用的媒体查询 CSS 规则中指定的背景图像，则不加载图像。许多早期的响应式布局受到批评，因为它们仍然使用与全尺寸网站相同的带宽。
这种设计也很有用，因为您可以轻松地为不同的屏幕尺寸指定不同的图像。如果没有 2x res 图形，平板电脑甚至笔记本电脑上的“Retina”显示屏现在看起来都不会是最好的。所以......即使你现在不做这些事情，这可能是一个很好的练习，因为你可能很快就会发现自己需要它！
【讨论】：
我认为通过在 div 中使用 background-image 属性，页面布局首先加载，并且在加载 dom 之后加载 div 中的图像。因此，通过使用 background-image 可以更快地在 Web 浏览器上加载 html 布局。
【讨论】：
我能想到的唯一区别是：
您不能将图像缩放为背景，尽管您可以缩放 img 标签。这将打开背景图像加载速度更快的场景，因为它强制您拥有正确的本机尺寸，而不是下载整个图像并对其进行缩放。然而，反过来也可能是正确的：鉴于您不太关心图像质量，您可以向您的页面提供较小的图像并放大它们。
我会坚持使用任何呈现更清洁的东西（并且更一致 - IE/FF/Chrome/Safari/etc）。
【讨论】：
技术差异是的，最值得注意的是您可以设置 IMG 标签的宽度/高度，它会拉伸图像，这在某些情况下很有用。
您必须牢记的主要内容是 HTML 文档中图像的上下文。如果图像是内容，比如图库中的图像，我会使用 IMG 标签。如果它只是界面的一部分，我可能会使用 div。
【讨论】：