CSS Sprites浏览器渲染

Question

我们都知道CSS精灵图像非常适合减少请求量等等，但是使用大图像作为背景渲染具有多个元素的页面的浏览器的性能呢？

Answer 1

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

你必须减轻诱惑，将所有精灵推向一个巨大的形象 - 想想哪些元素是网站/ webapp UI的一部分，并将它们放入一个精灵文件中（这些文件将一直显示，同时浏览） 。然后尝试将其余的精灵分组到特定于网站部分的图像中，并根据需要使用它们。下行是略微延长的加载时间（额外的HTTP请求），但查看/滚动页面时的用户体验会高得多。

Answer 2

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

Answer 3

正如我们可以根据我们的YouTube体验判断的那样，没有什么大问题。

希望浏览器将图像缓存在内存中，然后在需要此图像的地方使用它来呈现输出。

Answer 4

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

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

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