陈成的博客

新首页开发PPT详解 —— Sprites(1)January 16, 2010

因PPT写得过于简短，此文对PPT里的第二部分详细说明下，可以对照着看。

占位标签

“The biggest problem with CSS sprites is memory usage.” —— vladimir，a leader in the Mozilla community

内存占用高是CSS Sprites的一大缺点，因为通常他会包含非常多的空白。http://www.wthitv.com/这个网站曾经用了张1299 * 15000的Sprites图，虽然压缩后只有26K，但这张图的内存占用达75M+之多。

所以为了更好地应用Sprites，我们要减少Sprites里空白所占的比例。

搜索新首页源码，可以发现共有38处<s></s>，42处<b></b>，他们都是用来占位的。s和b是两个废弃的标签，因为废弃，所以用起来既安全又环保。(经人提醒，b标签并没有被废弃，只是推荐优先选择strong和em)

个人觉得通过利用占位标签，可以更好地组织CSS Sprites，随心所欲地安排进行内部组织，使得Sprite图片尺寸尽可能地小，也使得空白位尽可能地少。

这里权衡下优缺点：

• 优点：性能(内存占用少)、工作效率(省去精心计算)、成就感(图美)
• 缺点：DOM数增加

(ps: 此法绝非我原创，此前王爷和小虎就一直在用。)

Image Sprites

以下代码可以帮助理解什么是Image Sprites：

<div style="width:100px;height:100px;overflow:hidden;">
    <img src="" width="400" height="400" style="margin:-50px 0 0 –50px;" />
</div>

(Google搜索结果页的Sprites图)

Image Sprites最经典的例子当然是Google搜索结果页的logo了，logo和CSS Sprites公用一张图。但这种做法也需要权衡，并不是在所有场景都适用：

优点

1. 省去logo的HTTP请求
2. 提升Sprites图的在请求序列中的位置
   有种情况我们可能都看到过：页面载入后，先是看到一个框架全好但没有背景图的页面，然后背景图一下子全部展现出来。这是因为通常背景图的请求发生在CSS载入并解析完成且HTML解析器遭遇到对应的节点时。应用此方法后，可以减缓这种情况的发生。因为1)不需要等待CSS载入，2)logo一般在HTML文档顶部，所以请求发起时间会有所提前。

缺点&问题

1. logo不可复制
   logo作为品牌的象征，有些用户可能会希望把这张图片复制或另存下来做某些用途，但应用这种方法后会使用户得不到他们想要的。
2. 可替换(alt)文本显示问题
   使用负值定位后，alt文本会跟着img的位置一起变化，这样我们可能在图片未载入时就看不到希望看到的替换文本了。如图：
   
   (推荐阅读：各浏览器alt和title的显示情况，图)
3. IE渐进渲染PNG的bug(只测试IE6，IE7/8待考证)
   我们知道，默认存储的图片在浏览器中是渐进渲染的。但IE在处理PNG的渐进渲染时表现地很怪异，一张13.8K的图片，在载入11K时才渲染这么一点(如下图)，然后到13.8K时全部展现，这个问题会导致Logo的展现缓慢。
    
   (感兴趣的朋友可自行用Network Simulator打开这里看效果)