在Web应用程序中使用CSS Sprites有什么好处？

Question

我正在一个流量相当大的网站上工作,我正在研究使用CSS精灵来减少设计中的图像负载数量.

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

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

Answer 1

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

考虑:

什么需要时间,当做大量的请求获取小内容(如图像,图标等)是服务器的多次往返:你最终花时间等待请求去,服务器响应而不是使用这个时间来下载数据.

如果我们可以最小化请求的数量,我们最小化到服务器的次数,并更好地使用我们的高速连接(我们下载更大的文件,而不是等待许多较小的文件).

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

有关更多信息,您可以查看,例如:CSS Sprites:Image Slicing的死亡之吻

Answer 2

较少的http请求=整体加载速度更快.雅虎和合作.使用这种技术,如果你可以想象他们拥有的用户数量可以节省大量带宽.想象一下图标的50个单独图像,这是50个单独的http请求,而不是只有一个包含所有图像的css精灵,这将保存49个http请求并将每个网站的所有用户相乘.

Answer 3

实际上,精灵不是用来减少传输数据的数量(在大多数情况下,它会略微增加传输的数据量),而是减少在服务器上完成的请求数量.

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