使用图片精灵优化前端 减少http请求

所谓的图片精灵（CSS sprite）其实就是把几张图拼成一张图而已。它提供了一种把很多小图片拼成一张大一些的图片从而在低并发的浏览器上达到快速传输并呈现内容的目的。

大多数网站会做跨页面的图片精灵。就是把整个网站所有共用的小图片都合成一张图（图片精灵），这是一种有效减少HTTP 请求的办法。在用到这些图片的时候，你就引用整张图片然后设定坐标到你需要的那张小图上。所以你可以把要用到图标、标志、按钮等一些公共的图片集中到一张图上，然后整个网站都可以使用它。

还有一种有趣的方法可更进一步提升性能，就是把图片精灵根据颜色分组，分成多个文件。每一个精灵只有一种颜色范围，这样可以让每一个图片精灵文件变得更小。这种方法对于在颜色上有一定要求的公司会特别有效。比如你的公司的 Logo是红色和灰色的，那么公司的市场人员就可能用这两种颜色为菜单或其他功能做一大批图片。在这种情况下，你把图片精灵限制在只有红色和灰色的范围内，会使文件体积明显减小。

如果有你大量的小图片，即使不按颜色范围去区分它们，也需要依照某种法则去合成多张图片精灵，而不是一个。还有一种可能，就是这些图片是被多个团队所维护的，比如一个团队负责头部导航，另一个团队负责logo ，这样的话最好也分成不同的图片精灵。

当我们正在写此章的时候，我们的技术评审Jeff Johnson  提出了这样的一个问题：一张图片精灵多大的时候就应该被分割开了？这个问题非常好，有一个观点认为一个大的文件总是会比两个小一些的文件带来更多的问题。但是这个观点成立与否要看很多其他的因素，比如整个页面加载完成所需的 HTTP 请求数，是否用了 CDN加速甚至还要看是哪种浏览器。所以我不能很武断地给一个答案。我只能告诉你，无论是你认为把大的图片精灵分成小的会加速页面加载，还是把小的文件合成大的会提升页面加载速度，都需要实验，做一些实验记录数据，不断地尝试。互联网开发中有其他太多的因素，并没有哪一个方法是绝对最好的。一定要通过实验来找到答案。

从我的经验来讲，减少HTTP 请求是这几个准则中最有效的一个。所以，如果可以，把那些常用的图片合并成几张图片。理想情况是合并成一张图片，然后用位移去显示正确的部分。图3-3  是一张来自谷歌的图片精灵。

 

要使用这张图片，先做一个div 元素，然后用CSS 样式来指定我们想要显示的图标。

清单3-1 是这个 div 元素的代码。

清单3-1：示例div元素
<div class="arrowPrev"></div> 

清单3-2  是CSS 的详细代码。

清单3-2：图片精灵的CSS代码
. arrowPrev
{
  width: 22px;
  height: 25px;
  background-image: url(googlesprite.png);
  background-position: -6px -13px;
  background-repeat: no-repeat;
}

以上的CSS 规定了这个容器的宽和高，还有背景图片的起始位置坐标。它同时还规定了背景图是不可重复的。

最终得到一个向前的箭头，如图3-4 所示。

 

图片精灵的另一个好处就是虽然你只用其中的一个小图标但整个图片都被保存到了缓存中。这样每次使用就不需要再去请求图片，很多HTTP 请求就被节省下来了。拿谷歌这个例子来说，这张精灵图片中有60个小图，那就节省了60次HTTP 请求，这绝对是一个可观的性能提升。