15

我正在一个流量相当大的网站上工作，我正在研究使用 CSS sprite 来减少其设计中的图像加载数量。

除了减少传输的数据量之外，使用 CSS 精灵有什么好处吗？您真正节省了多少空间？是否存在使用 sprite 对网站有价值的阈值？

更新：感谢您的回复。它们显然都是经过深思熟虑的，并提供了很好的资源来验证你的观点。现在，我感觉更有能力在我的网站设计中做出关于使用 CSS sprites 的明智决定。

4

6 回答 6

17

问题通常不在于它可能节省的带宽量。它更多是关于降低呈现网页所需的 HTTP 请求数量。

考虑：

  • Web 浏览器只并行执行几个 HTTP 请求
  • 执行 HTTP 请求意味着往返服务器，这需要大量时间
  • 我们有“快速”的互联网连接，这意味着我们下载速度很快......

当执行大量请求以获取小内容（如图像、图标等）时，需要时间的是到服务器的多次往返：您最终会花费时间等待请求发送，而服务器会响应，而不是利用这段时间下载数据。

如果我们可以尽量减少请求的数量，我们就可以尽量减少访问服务器的次数，并更好地使用我们的高速连接（我们下载更大的文件，而不是等待许多更小的文件）。

这就是使用 CSS 精灵的原因。


有关更多信息，您可以查看，例如：CSS Sprites: Image Slicing's Kiss of Death

于 2009-07-28T04:53:14.177 回答
5

更少的 http 请求 = 整体加载速度更快。雅虎和公司。使用这种技术，如果您可以想象他们拥有的用户数量，它可以节省大量带宽。想象一下 50 个单独的图标图像，即 50 个单独的 http 请求，而不是只有一个包含所有图像的 css sprite，这将节省 49 个 http 请求，并将每个站点的所有用户相乘。

于 2009-07-28T04:41:50.657 回答
5

实际上，精灵并不是用来减少传输的数据量（在大多数情况下它会稍微增加传输的数据量），而是用来减少服务器上完成的请求量。

浏览器上的 HTTP 请求传统上是按顺序完成的。这意味着在前一个请求完成之前，一个请求不会开始。此外，打开连接以执行请求的成本很高。通过限制在服务器上发出的请求数量，您可以提高元素加载的速度。

于 2009-07-28T04:44:12.710 回答
2

我认为雅虎对 CSS 精灵有最好的论据。此外，整页值得一读：

http://developer.yahoo.com/performance/rules.html#num_http

于 2009-07-28T04:53:06.827 回答
1

除了通过限制请求数量来提高整体页面加载的性能外，图像精灵还可以使动态交换图像（例如在悬停时更改导航项的背景图像）“性能”更好一些，因为您所做的只是改变x,y 而不是 src。

所以我想回答保证使用它们的阈值是什么，我会立即说，因为每个客户端的潜在加载改进。

于 2009-07-28T04:48:50.050 回答
0

除了减少 HTTP 请求（如前所述）之外，CSS sprite 不依赖于 JavaScript。这提供了一些其他优点：

  • 需要维护的代码更少
  • 更轻松的跨浏览器测试
  • 可以通过style属性内联编码
  • 没有 DOM 黑客攻击
  • 没有图像预加载（所以管理少——“哦，等等，我需要预加载那个新的导航按钮......废话哪个 .js 文件有我的预加载器？”）
  • 您可以使用 css 类将其应用于多个选择器
  • 可以应用于任何带有:hover伪类的选择器，或任何可以用锚包装的选择器（不仅仅是imgs）

但是，如果您不反对 DOM hacking，您可以通过推动 X 和 Y 值来获得一些漂亮的动画效果。这使得动画许多不同的状态（如keypress或onmouseclick）变得更容易。

还有一些有趣的图形制作副作用：

  • 更少的图形制作文件
  • 更容易直接在 HTML 中对按钮等进行布局（对 PSD 组合的需求较少）
  • 无需重新生成大量图形即可更轻松地进行 GUI 更改
  • 对于图像盗版者来说，吞食您的图形要困难得多
于 2009-07-28T16:57:29.233 回答