合理使用CSS Sprite，避免内存暴涨

合理使用CSS Sprite，避免内存暴涨

作为减少HTTP请求数量，从而提高网站页面加载速度的一种方式，CSS Sprite已经出现了很久，并被很多网站广泛的应用，比如我们大家所熟知的淘宝。然而，关于CSS Sprite有一些误解，最主要的一个就是很多人认为CSS Sprite没有缺点。那么CSS Sprite有些什么缺点？我们又该如何正确合理的使用CSS Sprite呢？

首先，来看看CSS Sprite所带来的一些问题：

1、CSS Sprite的最大问题是内存使用。比如一张CSS Sprite png图片的大小为600*600，那么浏览器渲染它时需要的内存约为600*600*4=1.4Mb，当然这对于现在的电脑来说，不算一个很大的开销，这里只是为了说明这个问题。

2、CSS Sprite不利于网页缩放。

3、CSS Sprite调用的图片不能被打印，除非在@media中特别添加print声明。

4、如果要修改雪碧中的一个图片，你就要修改整张图片，这会给后续的开发和维护工作带来一些困难。

然而，为了减少HTTP请求数量，优化网站修饰图片是一个行之有效的好方法，相对于CSS Sprite来说，目前也还没有一个更好的能普遍应用的方法去替代它，我们需要做的是合理的使用CSS Sprite。

1、合理利用空间：我们可以用CSS Sprite合并一些大小相同的图片、图标到一个图片文件中，这样可以减少CSS Sprite文件中的空白，让浏览器减少对没用图片的渲染。

2、使用CSS Sprite时，尽量选择不会经常修改的图片，这样可以降低维护成本。

3、ie6 CSS sprites重复加载：如果你使用CSS sprites，那么在ie6下并不能发挥sprites的作用，它还是会每次再重新加载这个图片，解决方法为为ie6添加下面这条js：

<!--[if IE 6]>
<script type="text/javascript">
document.execCommand("BackgroundImageCache",false,true);
</script>
<![endif]-->

<!--[if IE 6]>
<script>
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(e) { }
</script>
<![endif]-->

后补充：有次去面试，面试那人问了关于如何使用 CSS Sprite 的问题，我差不多说了上面这些，但是面试的大牛告诉我，其实最主要的是把页面首屏所用到的装饰性的图片做成 CSS Sprite ，其它屏的可以用延时加载来解决，因为这样可以保证首屏以最快的速度呈现给用户，这确实很有道理，回来以后看了下淘宝，确实是如此，下图是淘宝首页首屏的 装饰性图片，大家可以结合淘宝首页去研究：