我开始知道，如果我们不给出宽度和高度属性。在图像标签中会有性能问题。我有一个 div 元素，我正在为其设置宽度和高度的百分比。同样的 div 也有一个固定大小的背景图像，比如 140px * 140px。在这里，会不会有性能问题？
标记示例：
<div style="width:50%;background:url('imgofsize140*140') no-repeat"> </div>
谢谢
问问题
745 次
8 回答
5
这不是一刀切的案例- 因此我们必须逐案查看。
我们必须记住很多变量——用户的互联网连接速度、图像大小、计算机功能等。
我在 SO 上发现了一些与这个问题有些相关的问题。我将它们包括在内，因为我认为它是有益的。我并不是说绝对正确。
BGIMG 与 IMG
性能论据
AFAIK，无论是在 DIV 还是 IMG 中，浏览器都会缓存相同的图像。无论如何，我认为这是将特定性能定义为每个渲染引擎（可能还有围绕它们构建的浏览器）内部的实现细节的情况之一。因此，它既不受我们作为设计师/开发人员的控制，又会随着浏览器和版本的变化而变化。换句话说，我不会花太多时间担心它。
语境
技术差异是的，最值得注意的是，您可以设置 IMG 标签的宽度/高度，它会拉伸图像，这在某些情况下很有用。
不过，您必须牢记的主要内容是 HTML 文档中图像的上下文。如果图像是内容，比如图库中的图像，我会使用 IMG 标签。如果它只是界面的一部分，我可能会使用 div 代替。- 保罗
对此的回应同样重要。
也就是说，您提出了关于语义差异的一个很好的观点：当图像是页面内容的重要部分时，IMG 通常是更好的选择，而当图像只是装饰或格式化时，通常首选 CSS 技术。
这与性能没有直接关系——更多关于语义和可访问性。作者——W先生
然后，我认为与您的问题直接相关的 SO 性能关闭。
页面加载测试
带有背景图像的版本实际上在 0.0225 秒后给了我一个“文档完成”——而完全加载的页面加载时间与内联图像版本大致相同。可以使用所有背景图像加速 $.document(ready) 的触发吗？事实证明，只有在元素（包含 div、span 等）可用后才下载背景图像。这可以防止阻止获取图像所需的所有往返行程。
结果：内嵌图像测试页
结果：背景图片测试页
于 2013-06-26T13:27:26.230 回答
4
我认为不会出现与未在 img 标签上指定高度和宽度相同的性能问题，因为这会迫使浏览器重新绘制整个页面，而这正是性能问题所在。
http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
于 2011-12-01T10:50:43.430 回答
2
tl;博士
您不会受到性能损失（在另一种情况下也非常小）。
更多细节：
你不应该关心（除非你为谷歌工作）你会因为不指定宽度和高度而得到性能“惩罚”，但更多的是关于你可能会得到的布局闪烁。
不指定宽度和高度将使浏览器显示一个初始框，因为它事先不知道图像将占用多少空间，并且在图像加载后它将进行重排 - 这意味着它必须重新计算一些元素的布局会受到尺寸变化的影响。但是，这实际上会很快发生（并且您可能会在许多其他地方触发回流）。
背景图像不需要回流。
于 2011-12-01T10:51:31.073 回答
1
我认为这不会影响性能。
如果您将背景图像组合成一张图像并在需要时将其定位，这将有助于提高性能，因为您只加载一张图像而不是多张图像。
于 2011-12-01T10:51:33.063 回答
1
除非 div 宽度小于 140px，否则背景图像将显示为 140x140。
您可能还想在 InternetExplorer 6-7-8 等旧版浏览器中检查结果，以确保是否存在任何其他性能问题。
于 2013-06-25T02:17:35.290 回答
1
取决于浏览器。我今天了解到，Chrome 当前会在您使用绝对位置 bg 图像滚动时重绘画布。Firefox 处理得很好。这应该在未来的 Chrome 版本中修复。
于 2013-06-25T03:06:21.400 回答
1
相反，指定 img 的高度和会导致性能问题。因为通过指定它们，您告诉浏览器先调整 img 的大小，然后再渲染图像。例如，存储缩略图比动态调整图像大小要好得多。
于 2013-06-25T03:12:57.493 回答
0
如果您的图像已经是您想要的指定尺寸，则无需在属性中指定高度和宽度。此外，使用背景图像不会有性能问题。
于 2013-07-01T17:00:18.773 回答