CSS Sprites 浏览器渲染

Posted 2023-02-16

【中文标题】CSS Sprites 浏览器渲染

【英文标题】：CSS Sprites browser rendering

【发布时间】：2010-10-24 06:57:52

【问题描述】：

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

【问题讨论】：

其实，一个有趣的问题！

【参考方案1】：

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

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

【参考方案2】：

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

【参考方案3】：

根据我们的 YouTube 经验判断，这没有什么大问题。

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

【参考方案4】：

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

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

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

【讨论】：

您没有回答问题。问题是关于浏览器渲染性能，而不是带宽或 HTTP 请求。