CSS Sprites---减少HTTP请求次数 构建高性能网站

提到CSS Sprites不得不说一下与之相似的Image Maps：

Image Maps

　　将一个页面中所要引用的图片整合成一个单一的图片文件，按顺序排好，再分切出里面的链接区域。这样对整个图片群的需求样式没有变，但减少了对图片的http请求数。
      图1-1显示的是一个有五个图片组成的导航栏，每个图片对应一个独立的超链接。我们常规的做法，当然就是做五个图片，然后为每个图片做一个链接;但为了更高效，我们把五张独立的图片做成一张image map，这样从五个HTTP请求，就变成了一个HTTP请求，相应的响应时间也就会变的更快了。

　　您可以试一下下面的两个链接，自己体会一下Image maps所带来的速度上的不同。

No Image Map
http://stevesouders.com/hpws/imagemap-no.php
Image Map
http://stevesouders.com/hpws/imagemap.php

　　如果使用IE6在DSL(~900Kbps)的网络环境下，用image map的方法组成的导航栏要比用单独图片文件的所组成的导航栏要快56%(354ms 比 799ms).这是因为image map会减少四个HTTP请求。

　　Image Map最常用的实现方式是使用HTML的map标签，把大图片分成一个一个的小块，并设置其不同的链接。如下：
 
<img usemap="#map1" border=0 src="http://7career.org/images/imagemap.gif">
  <map name="map1">
    <area shape="rect" coords="0,0,31,31" href="http://7career.org/home.html" title="Home">
    <area shape="rect" coords="36,0,66,31" href="http://7career.org/gifts.html" title="Gifts">
    <area shape="rect" coords="71,0,101,31" href="http://7career.org/cart.html" title="Cart">
    <area shape="rect" coords="106,0,136,31" href="http://7career.org/settings.html" title="Settings">
    <area shape="rect" coords="141,0,171,31" href="http://7career.org/help.html" title="Help">
 </map>

　　但是它所带来的缺点就是你得手动确定图片的坐标，这会比较乏味和容易出错，并且它只适合把图片都组合在一个长方形的区域里。

CSS Sprites　（您可以参考YouTube和iGoogle的首页，它们就是采用的这种优化方式）
　  与image maps类似，CSS Sprites也是把若干小图片合成一个大图片，但是CSS Sprites方式更灵活。为了实现CSS Sprites，是把各个小图片像组成一个棋盘一样地合成一个图片。如下图： 　　然后通过HTML中任何能支持背景图片的元素，如<span>或<div>，再通过CSS中的background- position属性来定位要显示的大图片中的某个小图片的位置。如下，就是要在上面给出的在图片中使用"My"这个图标来充当下面这个div的背景：

<div style="background-image: url('a_lot_of_sprites.gif');
　　　　　　　background-position: -260px -90px;
　　　　　　　width: 26px; height: 24px;">
</div>

 

　　我把前面我介绍image map的例子转成CSS Sprites的形式：把导航栏的五个链接都放到一个名为navbar的DIV中。每个链接都有一个SPAN元素，在#navbar的样式中为SPAN元素定义了背景图片spritebg.gif，但每个SPAN都有一个不同的class以指明其具体显示的背景图片的偏移位置，正是利用了CSS中的 background-position属性。

<style>
#navbar span {
   width:31px;
   height:31px;
   display:inline;
   float:left;
   background-image:url(/images/spritebg.gif);
 }
.home { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts { background-position:-32px 0; margin-right:4px;}
.cart { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help { background-position:-128px 0; margin-right:0px;}
</style>

<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333;
                                  width:180px; height: 32px; padding: 4px 0 4px 0;">
  <a href="javascript:alert('Home')"><span class="home"></span></a>
  <a href="javascript:alert('Gifts')"><span class="gifts"></span></a>
  <a href="javascript:alert('Cart')"><span class="cart"></span></a>
  <a href="javascript:alert('Settings')"><span class="settings"></span></a>
  <a href="javascript:alert('Help')"><span class="help"></span></a>
</div>

　　这比image map的方式的例子要更快：342ms VS 354ms，但是他们之间的实现方式只有很小的不同。但重要的是，这可比用单独的五个图片的例子要快57%了。
CSS Sprites
   http://stevesouders.com/hpws/sprites.php

　　我们看到，image map的方式要求所有的图片是连续的组合在一起的，而CSS Sprites没有这个限制。关于CSS Sprites的优缺点在Dave Shea的权威文章"CSS Sprites: Image Slicing's Kiss of Death"中已经有详细的介绍，但我已经从CSS Sprites中体会到它的优点：减少了HTTP请求，比image maps灵活。另一个让我没想到的优点是它减少了下载的数据量。大多数人可能会认为一个拼合成的大图片肯定要比这此小图片的总量要大，因为它会有一些小图片的间隔区域。实际上正相反，大图片减少了图片中的color tables和格式信息等，而使得大图片比一堆小图片实际size要小一些。

 　  如果你的网站中有很多背景图片，按钮图片，导航栏图片，那么你应该用CSS Sprites方式来优化你的页面了。（您可以参考YouTube和iGoogle的首页，它们就是采用的这种优化方式）

还有一个好玩的例子：

CSSplay网站上的一个

The streaker - just for fun动画就是完美实例

http://www.cssplay.co.uk/menu/streaker