css - 图像在 HTML 或 CSS 中加载速度更快吗？

Question

如果我在侧边栏上使用此 html 加载图像

<img src="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" height="200px" width="200px" alt="image" />

它会比我放在侧边栏上加载得更快/更慢吗我的 style.css(在 header 中调用)在哪里

.image {
  width: 200px;
  height: 200px;
  background-image: url('http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png');
}

<div class="image"></div>

Answer 1

这可以使用 Firebug(在 Net 下)、Chrome 开发者工具(在 Network 下)、Fiddler 或您喜欢的任何其他 HTTP 嗅探器轻松验证。

如果您将图像放在 CSS 中作为背景图像，则图像只会在该类实际使用并且可见时才会下载。如果将它放在 img 中，它将立即下载并阻止渲染，即使它是不可见的。

最后，如果您计算图像本身的加载速度，它们都一样快。 真正的问题是感知的性能是否更好，因为图像下载的顺序可能会有所不同，具体取决于您放置元素的位置。

不过我会更担心其他方面。将图像作为背景图像意味着:

• 图片不是内​​容
• 不可打印
• 您可以使用 sprite 来减少 HTTP 请求的数量(从而提高性能)
• 是slower to animate背景图像比 img