css - CSS Sprites 浏览器渲染

Question

我们都知道 CSS sprite 图片可以很好地减少请求量等，但是浏览器使用大图片作为背景渲染包含多个元素的页面的性能如何呢？

Answer 1

在配备较旧浏览器（如 IE6/IE7）的较慢机器上，当您在一个页面上多次使用非常大的图像时，您会注意到性能显着下降。当您将精灵用于 :hover 状态时，情况会更加严重。

您必须控制将所有 sprite 推送到一张巨大图像的诱惑 - 考虑哪些元素是网站/webapp UI 的一部分并将它们放入一个 sprite 文件（这些将在浏览时一直显示）。然后尝试将其余的精灵分组到特定于网站部分的图像中，并根据需要使用它们。缺点是加载时间稍微延长（额外的 HTTP 请求），但查看/滚动页面时的用户体验会更高。

Answer 2

你需要平衡事情。如果您正在谈论包含 1000 个精灵的图像，那么 CSS 将是巨大的。此外，无论如何您都极有可能在同一页面中使用所有这些精灵。

Answer 3

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

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

Answer 4

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

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

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