css中有很多背景图像会影响性能吗？

一些用户报告我的网站速度太慢 我认为css中的背景图像可能是一种可能 罪魁祸首

我有一个使用自定义构建系统的站点 要连接所有css，请压缩它们（yui压缩器），制作css精灵 自动（smartsprites）和我最终为 整个页面，这包括了所有的css的背景图像，最后是d他们 大约60人（几个人去了同一个精灵不知道有多少人）

我想知道浏览器的默认行为 是根据需要下载图像（当图像与选择器匹配时） 或者全部下载

现在firefox中的firebug似乎表明它们都已下载。 您建议我使用什么技巧来避免问题，或者 缓解它

编辑： 我误读了firebug，正在下载的图像属于lightview

---

这是隐藏的，但背景图像与dom匹配。

默认浏览器行为是一次下载两个项目（即2个http请求），如果您认为有很多图像，请为图像创建一个子域，如

images.yoursite.com

，然后您将开始看到浏览器发出并行请求，您可以看到性能上的一些改进

请仔细查看您发送的图像，特别是如果有许多图像被编译成单个“sprite”图像

---

可能发生的情况是，您指向的图像非常大。当然，它应该只加载一次（sprite方法的好处），但是如果它有几百KB，肯定会导致一些性能问题。

不，事实上，最好将它们放在CSS中，而不是放在标记中

图像调用不会阻塞页面，当加载图像时，图像将呈现在页面上，因此总体而言，最好通过CSS加载图像。更不用说这种设计也更加灵活

（不用说，这些图像中的每一个都会占用带宽和额外的HTTP请求）

（旁白。并不是真的回答你的问题。但可能很有趣，甚至是相关的。）

---

我认为另一个可能的罪魁祸首是“一些用户”总是觉得你的网站“太慢”。（也许这更多的是精神崩溃，而不是堆栈溢出的东西？这些用户认为什么是快速站点？他们能给出例子吗？它们的连接和计算机有多快？它们在哪里，你的服务器在哪里？什么是慢的？注册过程？在HD中观看视频？滚动窗口？加载Firefox？毕竟，它。”s humans..n'est pas？

有一个很好的firefox插件，名为Yslow，它为您提供了一些关于性能优化的有用信息。它向您显示它检测到的性能问题，并提供建议改进的文章的链接。

关于最佳做法的一些信息

---

缓慢加载还是一般缓慢？缓慢加载。一旦加载，性能就正常了是什么让你认为是图像加载导致了网站速度变慢？firebug是否报告您的图像的GET命令加载时间过长，或者这是一个消除过程？我在firebug中看到一些未使用但正在下载的图像，我想可能浏览器正在下载所有背景图像，而不仅仅是正在使用的图像。事实证明，它们被使用但不可见（一个lightview脚本使用了它们），我已经有了一个images子域。虽然我不使用它来加载这个css图像，但是“内容”（动态上传）图像。所以我认为在这些图片中使用这个子域并没有什么好处。我已经检查过了。最大的精灵是15KB。我听到了！但是我有点不安全，这些评论来自网站的联系方式，所以我无法与他们面对面交流。谢谢，你是说只有在需要的时候才会加载图像。