html - 如果我使用背景图片会有性能问题吗

Question

我开始知道，如果我们不提供宽度和高度属性。在图片标签中会有性能问题。我有一个 div 元素，我正在为其设置宽度和高度百分比。同样的 div 也有一个固定大小的背景图像，比如 140px * 140px。这里会不会有性能问题？

标记示例:

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

谢谢

Answer 1

这不是一个放之四海而皆准的案例 - 因此我们必须逐个分析。

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

我在SO上发现了几个与这个问题有些相关的问题。我会把它们包括在内，因为我认为它是有益的。我没有声称自己是绝对正确的。

---

BGIMG vs IMG

性能参数

AFAIK, browsers cache images the same whether they're in a DIV or an IMG. In any case, I think this one of those cases where specific performance is defined as an implementation detail internal to each rendering engine (and possibly the browsers built around them). As such, it's both out of our control as designers/developers and subject to change from browser to browser and version to version. In other words, I wouldn't spend too much time worrying about it.

上下文

Technical differences yes, most notably you can set the width/height of an IMG tag and it will stretch the image, which can be useful in some situations.

The main thing you've got to keep in mind though is the context of the image within the HTML document. If the image is content, say an image in a gallery, I'd use a IMG tag. If it is just part of the interface I might use a div instead. - By Paul

对此的回应同样重要。

That said, you bring up an excellent point about the semantic difference: an IMG is usually the better choice when the image is a material part of the page's content, while a CSS technique is usually preferred when the image is just decorative or for formatting.

这与性能没有直接关系——更多关于语义和可访问性。作者 - W 先生

---

然后是 Performance OFF of SO，我认为这与您的问题直接相关。

Page Load Test

The version with background images actually gave me a “Document Complete” after .0225 seconds – while the fully loaded page load time was roughly the same as the inline image version. Could using all background images speed up firing of $.document(ready)? It turns out background-images are only downloaded after the element (containing div, span etc) is available. This prevents blocking from all the round trips required to get images.

结果:内联图片测试页

结果:背景图片测试页