2

一些用户报告说我的网站太慢了我认为 css 中的背景图片可能是罪魁祸首

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

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

现在firefox中的firebug似乎表明它们都已被下载。你会建议我用什么技术来避免这个问题，或者减轻它。

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

4

5 回答 5

2

不，实际上将它们放在 CSS 中比放在标记中更好。

图像调用不会阻塞页面，并且随着图像的加载，它们将呈现在页面上，因此总体而言，通过 CSS 加载它们是一个好主意。更不用说这种设计也更加灵活。

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

于 2009-06-02T08:51:28.500 回答
1

默认浏览器行为是一次下载两个项目（即 2 个 http 请求），如果您认为您有很多图像，请为您的图像创建一个子域，images.yoursite.com您将开始看到浏览器发出并行请求，您可以看到性能上的一些改进

于 2009-06-02T00:36:30.057 回答
1

（副题。没有真正回答你的问题。但可能很有趣甚至相关。）

我认为另一个可能的罪魁祸首是“某些用户”总是会觉得您的网站“太慢”。（也许这更像是精神崩溃而不是 Stack Overflow 的事情？这些用户认为什么是快速站点？他们能举个例子吗？他们的连接和计算机有多快？他们在哪里，你的服务器在哪里？到底是什么慢？注册过程？看高清视频？滚动窗口？加载 Firefox？毕竟，这是人类.. n'est pas？）

于 2009-06-02T11:31:00.380 回答
0

也许仔细看看你发送的图像，特别是如果有很多它们被编译成一个单一的“精灵”图像。

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

于 2009-06-02T00:47:42.467 回答
0

有一个不错的 Firefox 插件，名为 Yslow，它为您提供了一些有关性能优化的有用信息。它向您显示它检测到的性能问题，并为您提供指向建议改进的文章的链接。 http://developer.yahoo.com/yslow/

有关最佳实践的一些信息 http://developer.yahoo.com/performance/rules.html

于 2009-06-03T21:52:40.180 回答