如果我使用背景图像会有性能问题

Question

我开始知道，如果我们不给宽度和高度attr。在图像标签中会有一个性能问题。 我有一个div元素，我以百分比设置宽度和高度。同样的div也有固定大小的背景图像，例如140px * 140px。 在这里，是否会出现性能？

标记示例：

<div style="width:50%;background:url('imgofsize140*140') no-repeat">&nbsp;</div>

由于

Answer 1

这不是一个适合所有情况的 - 因此我们必须看一下个案。

我们必须记住很多变量 - 用户的互联网连接速度，图像大小，计算机功能等。

我在SO上发现了一些与这个问题有些相关的问题。我会把它们包括在内，因为我觉得它很有用。我不声称绝对正确。

---

BGIMG vs IMG

性能参数

  

AFAIK，无论是在DIV还是在DIV中，浏览器都会对图像进行缓存   IMG。无论如何，我认为这一个具体的案例之一   性能被定义为每个内部的实现细节   渲染引擎（可能还有围绕它们构建的浏览器）。如   这样，它既不是我们作为设计师/开发者和主题的控制   从浏览器更改为浏览器，从版本更改为版本。其他   话说，我不会花太多时间担心它。

上下文

  

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

     

你必须记住的主要事情是   HTML文档中的图像。如果图像是内容，请说出图像   在图库中，我会使用IMG标签。如果它只是界面I的一部分   可能会使用div代替。    - 保罗

对此的回应同样重要。

  

那就是说，你提出了关于语义的一个很好的观点   差异：当图像是a时，IMG通常是更好的选择   页面内容的重要部分，而CSS技术通常是   当图像只是装饰性或用于格式化时，首选。

这与性能无直接关系 - 有关语义和可访问性的更多信息。由 - W先生。

---

然后还有一个关于SO的Performance OFF，我觉得这与你的问题直接相关。

Page Load Test

  

带有背景图片的版本实际上给了我一个“文档   完成“.0225秒后 - 完全加载页面加载时间   与内联图像版本大致相同。可以全部使用   背景图片加速$ .document（准备好）的解雇？事实证明   background-images仅在元素之后下载（包含   div，span等）可用。这可以防止所有回合阻塞   获得图像所需的旅行。

结果：内嵌图像测试页

结果：背景图像测试页

Answer 2

我不认为会出现性能问题，就像在img标记上没有指定高度和宽度一样，因为这会强制浏览器重新绘制整个页面，而这就是性能问题所在。

http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

Answer 3

TL;博士

您不会受到性能损失（在其他情况下也非常小）。

更多细节：

你不应该关心（除非你在Google工作）关于你没有指定宽度和宽度的性能“惩罚”。高度，但更多关于你可能得到的布局闪烁。

未指定宽度和高度将使浏览器显示一个初始框，因为它事先不知道图像将占用多少空间，并且在加载图像后它将进行重排 - 这意味着它将具有重新计算一些元素的布局，这些元素会受到尺寸变化的影响。但是，实际上这种情况发生的速度非常快（而且你可能会在很多其他地方引发回流）。

背景图像无需重排。

Answer 4

我认为这不会影响性能。

如果您将背景图像合并为一个图像并将其定位为需要时，这将有助于加快性能，因为您只加载一个图像而不是多个图像。

Answer 5

除非div宽度小于140px，否则背景图像将显示为140x140。

您可能还想检查旧浏览器（如InternetExplorer 6-7-8）中的结果，以确保是否存在任何其他性能问题。

Answer 6

取决于浏览器。我今天了解到，当您使用绝对位置bg图像滚动时，Chrome会重新绘制画布。 Firefox处理得很好。这应该在将来的Chrome版本中修复。

Answer 7

相反，指定img高度会导致性能问题。 因为通过指定它们，您告诉浏览器首先调整img的大小，然后渲染图像。例如，存储缩略图比在运行中调整图像大小要好得多。

Answer 8

如果您的图像已经是您想要的指定尺寸，则无需在属性中指定高度和宽度。此外，使用背景图像不会出现性能问题。