CSS Sprite浏览器渲染

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

解决方法

在装有旧版浏览器(如IE6 / IE7)的较慢机器上,当您在一个页面上使用非常大的图像时,您可以注意到显着的性能下降.当您使用精灵：悬停状态时,情况更加严重.

你必须调整你的诱惑,把你所有的精灵推到一个巨大的形象 – 想想哪些元素是网站/ webapp UI的一部分,并将它们放入一个精灵文件(这些将一直显示在浏览).然后尝试将其余的精灵分组到网站部分特定的图像中,并根据需要使用它们.下降是稍微延长的加载时间(额外的HTTP请求),但是在查看/滚动页面时的用户体验会更高.