是否在CSS中有太多的背景图片会影响性能？

Question

一些用户报告说，我的网站速度太慢 而且我认为在CSS背景图像可能是一个可能的 罪魁祸首

我有一个使用自定义生成系统网站 来连接所有的CSS，压缩他们（YUI压缩机），使CSS精灵 自动（smartsprites），我结束了一个9KB CSS的 整个页面，这包括所有的CSS在过去的背景图像是d他们 是围绕60（几个去同一个精灵不知道有多少）

我想知道如果浏览器的默认行为 是下载图像根据需要（当他们选择匹配） 或下载它们。

现在Firefox中的Firebug似乎表明，它们都被下载。 什么技巧，你会建议我会使用，以避免该问题，并或 减轻它。

编辑： 我误读萤火虫，正在下载的图像属于lightview 被隐藏，但背景图像被匹配到DOM。

Answer 1

没有，其实这是更好地把他们在CSS比标记。

在图像呼叫将不会阻止页面和作为图像加载它们将在网页上，从而整体被渲染它是通过CSS加载它们一个好主意。且不说这种设计也更加灵活。

（不言而喻，每个这些图像会占用带宽和额外的HTTP请求）

Answer 2

浏览器默认行为是在一个时间（即2 HTTP请求），如果你认为你有大量的图片创建一个子域的相似图片images.yoursite.com，你将开始看到浏览器进行并行下载请求的两个项目，你可以看到一些性能改进

Answer 3

（侧面的话题。没有真正回答你的问题，但可能是有趣的，甚至相关的。）

我认为另一个可能的罪魁祸首是，“一些用户”永远觉得你的网站是“太慢”。 （也许这更是一个精神崩溃比堆栈溢出的东西是什么？做这些用户认为是一个快速的网站？他们可以给的例子吗？如何快速是他们的连接和电脑？他们在哪里，哪里就是你的服务器位于什么的究竟的是慢？注册过程？在高清观看影片，滚动窗口？加载的Firefox？毕竟，这是人类.. n'est PAS？）

Answer 4

也许需要在你发送，特别是如果有很多人被编译成一个单一的“精灵”图像的图像（S）一探究竟。

什么可以发生的事情是，你指向图像是非常大的。当然，它应该只加载一次（精灵方法的利益），但如果是几百KB它肯定能引起一些性能问题。

Answer 5

有叫做YSlow的一个很好的Firefox插件，让你对性能优化的一些有用的信息。它显示它检测到的性能问题，并为您的文章链接暗示的改善。 http://developer.yahoo.com/yslow/

这是最佳做法的一些信息 http://developer.yahoo.com/performance/rules.html