为什么要使用Css Sprite？

1. Css Sprite的起因

图标原来是怎样的就让它怎样好啦？为什么要多此一举把它们集合到一张图里去呢？@H_502_10@

其实，这和网页的加载请求有关，一般来说一个网站里并不仅仅只有一两个小图标，假如某个网站的首页一共有十个小图标，那么加载这个网页的时候你的电脑就会发送十个请求。@H_502_10@

每个请求回来的响应就是一张小图标图片。但是如果把这些小图标都放在一张大图里，那么就只需发送一个请求。@H_502_10@

看到这里你会不会有一些疑惑：虽然十个请求变成了一个请求，但是图片大小也变成了十倍，这样的话还是没有实质性的改变啊。@H_502_10@

其实浏览器同一时间加载的资源数是有限的，如果一次性加载十个图标，浏览器就不会在同一时间继续加载别的资源了，减少了页面的请求次数，也自然就提高了页面的加载速度。@H_502_10@

2. 举个例子

举个生活中的案例来方便大家理解：@H_502_10@

如果冰箱里有你想吃的十个蓝莓，你是会每次拿过来一个然后跑十次呢？还是会一次性把十个蓝莓都拿过来呢？@H_502_10@

虽然说一次性拿十个看似拿的东西变多了，但因为蓝莓这种东西本来就又轻又小，所以一次拿十个比一次拿一个跑十趟划算多了。@H_502_10@

而且我们大部分人用手机的时间都超过了用电脑的时间，在移动端依赖的是速度相对较慢的无线网络，甚至有可能是在电梯或者地铁这种信号不稳定的地方去访问网站。@H_502_10@

在这种情况下将多张图片合并到一张图片后，只需一次网络请求就可以将所需的源资源全部下载，减小建立连接的消耗，这在移动端的优势尤为明显。@H_502_10@

3. Css Sprite的优势

• 减少网页的 http 请求。 利用Css Sprite能够很好地减少网页的 http 请求，从而大大的提高页面的性能，这也是其最大的优点，也是其被广泛传播和应用的主要原因。@H_502_10@

• 减少图片的大小。 Css Sprite能够减少图片的大小，3 张图片合并成 1 张图片的大小比这 3 张图片加起来的大小还要小。@H_502_10@

• 简化图片命名。 解决了在图片命名上的困扰，只需对一张Css Sprite命名就可以了，不需要对每一个小元素进行命名，从而减少了掉头发的次数。@H_502_10@

• 方便更换主题。 只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。@H_502_10@

4. 小结

综上所述，我们已经了解了为什么要"多此一举"的把小图片都集合在大图片里。@H_502_10@

不过外界有一些传言说随着 HTTP2 的到来，这种技术已经过时了。@H_502_10@

那么这些传言是否为真呢？请看下一小节。@H_502_10@