CSS精灵浏览器渲染

我们都知道CSS sprite图像对于减少请求量等非常有用，但是浏览器使用一个大图像作为背景呈现具有多个元素的页面的性能如何呢？

我们可以从YouTube的经验判断，这没有什么大问题

---

希望浏览器将图像缓存在内存中，然后使用它在需要该图像的任何位置渲染输出。

您需要平衡事物。如果你说的是一个包含1000个精灵的图像，那么CSS将是巨大的。此外，在同一页面中使用所有这些精灵的可能性很小。

通过将图像合并到一个或多个复合精灵中，并使用CSS在网页中选择性地显示精灵的部分，可以节省大量HTTP请求。现在，主流浏览器已经发展到足以支持CSS背景和定位，更多的网站正在采用这种性能技术。事实上，Web上一些最繁忙的站点使用CSS精灵来保存HTTP请求

拥有数百万用户的雅虎！AOL尽其所能改善用户体验。AOL.com和Yahoo.com都使用CSS精灵为其复杂的接口保存大量HTTP请求。这两个网站都使用CSS精灵在其服务目录中选择性地显示图标，Yahoo！在其他地方也使用精灵

---

CSS精灵的另一个好处是，尽管在图像之间添加了空格，但组合图像的文件大小通常比单个图像小。sprite的较小尺寸是由于减少了多个颜色表的开销以及单独图像所需的格式信息。为了最大限度地提高可访问性和可用性，CSS精灵最好用于图标或装饰效果。

在配备旧浏览器（如IE6/IE7）的速度较慢的机器上，当您在一个页面上多次使用非常大的图像时，您会发现性能显著下降。当你在悬停状态下使用精灵时，情况更为严重

---

你必须缓和你的诱惑，把你所有的精灵都推到一个巨大的图像上——想想哪些元素是网站/webapp用户界面的一部分，并把它们放在一个精灵文件中（浏览时这些元素会一直显示）。然后尝试将其余的精灵分组到特定于网站部分的图像中，并根据需要使用它们。缺点是稍微延长了加载时间（额外的HTTP请求），但查看/滚动页面时的用户体验会高得多。

实际上，这是一个有趣的问题！你没有回答这个问题。问题在于浏览器呈现性能，而不是带宽或HTTP请求。