CSS Sprites 浏览器渲染

Question

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

Answer 1

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

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