即使CSS未应用，所有CSS背景图片都会加载吗？

Question

我担心我们网站首页的加载时间。

我的首页使用了一个默认样式表，其中包含整个网站的所有样式。我在其他页面的元素中引用了背景图片（即没有在首页上使用）。当用户访问网站首页时，这些背景图片是否仍然会被加载？

或者只有直接在该页面上使用的css背景图片才会被加载？

- Mo Boho

Answer 1

有一种方法可以找出问题：使用调试代理工具。

对于不同的浏览器，答案可能会有所不同。

- Michael Brewer-Davis

---

安装了Fiddler（http://www.fiddler2.com/fiddler/help/hookup.asp#Q-NonWindows），并运行它。打开IE 8（仅用于测试 - 实际上不使用它）并访问我的网站。 Fiddler显示所有请求，看起来IE8至少也不会加载背景图像，除非该页面上使用了css元素。所以这是个好消息。我没有访问IE7或IE6的权限 - 有人有关于这两个浏览器如何工作的信息吗？ - Mo Boho

@MoBoho 如果您有IE8，您可以通过使用开发者工具更改呈现器版本来访问IE7。 - Alejandro García Iglesias

Answer 2

图片只有在页面上实际使用时才会加载；至于所有样式都在主页上加载，这实际上是一件相当好的事情。一旦单个CSS文件在查看器缓存中，它就存在那里，不需要为后续页面下载。

其他人的帖子提醒我，我正在基于firebug上的信息；除了FF之外的浏览器可能会下载那些未使用的背景图片，但我真的很怀疑。

- Erik

---

这是我原本想的...但是我一直没有找到一个明确的答案。我在Firefox中使用了Live HTTP Headers扩展程序，发现它们没有被加载，但不知道如何检查IE是否也是同样的情况。难道W3C或CSS标准没有对此给出明确的答案吗？ - Mo Boho

是的，因为IE真的坚持标准:p 如果标准这样说，并不意味着IE会这样做。 - Erik

Answer 3

在Erik的答案基础上，您可以使用像Google的Page Speed Firefox附加组件（我相信它是建立在Firebug之上的）这样的工具，查看当加载网站时实际上导致其变慢的原因。

您可以在此处查找有关该工具和其他一些提示的更多信息：http://code.google.com/speed/page-speed/docs/using.html

- Aishwar

---

我使用YSlow，它也是建立在Firebug之上的 - 我认为它与Google插件类似。 - Mo Boho