css 中有太多背景图片会影响性能吗？
有些用户报告我的网站速度太慢 我认为 css 中的背景图像可能是可能的 罪魁祸首
我有一个使用自定义构建系统的网站 连接所有CSS，压缩它们（yui压缩器），制作CSS精灵 自动（ smartsprites ），我最终得到了 9kb CSS 整个页面，这包括背景图像的所有 css 最后是它们 大约 60 个（有几个进入同一个精灵，不确定有多少个）
我想知道浏览器的默认行为是否 是根据需要下载图像（当它们与选择器匹配时） 或全部下载。
现在firefox中的firebug似乎表明它们都已下载。 您建议我使用哪些技术来避免该问题，或者 减轻它。
编辑： 我误读了firebug，正在下载的图像属于lightview 它是隐藏的，但背景图像与 dom 匹配。
Some users are reporting that my site is too slow
And i think background images in css might be a possible
culprit
I have a site that uses a custom build system
to concatenate all css, compress them ( yui compressor ) , make css sprites
automatically ( smartsprites ) and I end up with a 9kb CSS for the
whole page, this includes all css for background-images at last is d they
were around 60 ( several go to the same sprite not sure how many )
I was wondering if the default behavior of browsers
is to download the images as needed ( when they match a selector )
or download them all.
Right now firebug in firefox seems to suggest that they are all been downloaded.
What techniques would you suggest i'd use to avoid the problem, and or
mitigate it.
edit:
I misread firebug, the images that are being downloaded belong to a lightview
that is hidden but the background-images are matched to the dom.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
默认浏览器行为是一次下载两个项目（即 2 个 http 请求），如果您认为您有很多图像，请为您的图像创建一个子域，例如
images.yoursite.com，然后您将开始看到浏览器发出并行请求，您可以看到性能有所提高the default browser behavior is to download two items at a time(i.e. 2 http requests), if you think you have lots of images create a sub domain for your images like
images.yoursite.comand you will start seeing the browsers making parallel request, and you can see some improvement in performance不，事实上，将它们放在 CSS 中比放在标记中更好。
图像调用不会阻塞页面，并且当图像加载时，它们将呈现在页面上，因此总的来说，通过 CSS 加载它们是一个好主意。 更何况这样的设计还比较灵活。
（不用说，每个图像都会占用带宽和额外的 HTTP 请求）
No, in fact it's better to put them in the CSS than in the markup.
The image calls will not block the page and as the images are loaded they will be rendered on the page so overall it is a good idea to load them via CSS. Not to mention that this design is also more flexible.
(It goes without saying that each of those images will take up bandwidth and extra HTTP requests)
（旁白。没有真正回答你的问题。但可能很有趣，甚至相关。）
我认为另一个可能的罪魁祸首是“一些用户”总是觉得你的网站“太慢”。 （也许这更像是一种精神崩溃而不是 Stack Overflow 的事情？这些用户认为什么是快速网站？他们能举例吗？他们的连接和计算机有多快？他们在哪里，你的服务器位于哪里？什么确实很慢？观看高清视频？加载 Firefox？毕竟，这是人类？）
(Side topic. Not really answering your question. But might be interesting or even relevant.)
I think another possible culprit is that "some users" will always feel that your site is "too slow". (Maybe it's more of a Mental Breakdown than Stack Overflow thing? What do these users consider being a fast site? Can they give examples? How fast is their connection and computer? Where are they, and where is your server located? What exactly is slow? The signup process? Watching videos in HD? Scrolling the window? Loading Firefox? After all, it's humans.. n'est pas?)
也许仔细看看您发送的图像，特别是如果有很多图像被编译成单个“精灵”图像。
可能发生的情况是您指向的图像非常大。 当然，它应该只加载一次（精灵方法的好处），但如果它有几百 KB，肯定会导致一些性能问题。
Maybe take a closer look at the image(s) you're sending, particularly if there are a lot of them being compiled into a single "sprite" image.
What could be happening is that the image you're pointing to is very large. Sure, it should only be loaded once (the benefit of the sprite method), but if it's several hundred KB it could certainly cause some performance problems.
有一个名为 Yslow 的不错的 Firefox 插件，它可以为您提供一些有关性能优化的有用信息。 它会向您显示检测到的性能问题，并为您提供建议改进的文章的链接。
http://developer.yahoo.com/yslow/
有关最佳实践的一些信息
http://developer.yahoo.com/performance/rules.html
There's a nice firefox plugin called Yslow that gives you some useful information about performance optimization. It shows you performance issues it detected, and gives you links to articles suggesting an improvement.
http://developer.yahoo.com/yslow/
Some info on best practices
http://developer.yahoo.com/performance/rules.html