WEB程序性能优化之CSS Sprites

&B%?;u QzF[G:m0前几天看了篇关于CSS Sprites的文章（mg12），这样一种追求完美的技术，不仅仅是体现开发者的满足感，更重要的是为服务器节省了很可观的资源，目前这个web程序盛行的年代，这个技术应该是每个关注性能的人都应该了解的。作为一个测试人，你可能不需要去精通这个技术如何使用，但是在某些时候，你或许可以建议公司的产品使用它。51Testing软件测试网c d9RP[+b Zt

CSS Sprites简单来讲就是：将小图标拼在一个图片文件里. 然后在 CSS 中通过 background-position 定位访问图标。CSS Sprites对于访问量很大的网站来讲好处显而易见。我们知道基于http协议，服务器上每一个独立的资源（图片，css，js等）浏览器都要通过一个get请求来获取。如果网站上只有10个图标，那每一个访问者初次访问时都要发送10个get请求来获取这十个图标，但是如果使用CSS Sprites，就能把请求数降低到原来的十分之一，也许每一个get消耗的时间非常短，但是这个时间和一个主流的门户网站每天的浏览量做个乘法运算，这个数字也相当了得。所以我觉得这个技术不应该只是程序员完美主义的表现，而是应该做为一个web程序开发的标准。51Testing软件测试网D'Wt&WK+jf[M

(ln-|OQI#r051Testing软件测试网sRd-Y/I2s4W7EA5^,}

c"p2JT"_I0目前国外的一些网站都开始广泛使用此技术，Google，Yahoo，Facebook等，Goole用的最炉火纯青，不过它主要是用此技术用到了制作美观的效果上，而Yahoo和Facebook确实是为了改善服务器性能。

*fS*Cd w1JNP0我这里做了一个小小的示例以供观者能更详细的了解这个小精灵。先看下面这个图片：51Testing软件测试网&hY7To5mM

51Testing软件测试网+V6`M9OS cXfh

这张图片中有两个小图标是连在一起的，下面只需要使用以下css调整位置就可以只调用其中那个一张图片，或者调用两张图片，并且随意调整图标位置，我只是简单的用DIV显示一下：51Testing软件测试网4hV+\"Vu(L/V"D/k

0G,j4|D6`9Ko0

MJ\-J%NE {0

这一句就是显示那个问号，只要你的页面用到问号的统统这样调用就可以了，51Testing软件测试网{%ro:L
K

(oE @Uia.e~051Testing软件测试网4|6[%c[~8]1`rx

调用第一个图标，显示效果见：Demo

此文主要把CSS sprites当成一种性能优化的手段，若要了解更详细的CSS sprites细节，可以参考以下网站：

@)E0b$`T,]m-je1Z0中文资料http://realazy.org/blog/2007/10/08/css-sprites/51Testing软件测试网o3Zf8jdC

}tHD v$k x0英文资料http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/51Testing软件测试网D Cw2izd9F]A

D/G,o,GAt'h;Ps(B0在线制作工具http://www.csssprites.com/（本站Demo在此网站生成）51Testing软件测试网 |K9hr0HD

其他资源：

Q?.P2I/bj@0What Are CSS Sprites?

51Testing软件测试网Rj
g)Q;D m:J&L.}wO

http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=151Testing软件测试网l@{9l
`V'V

CSS Sprites: Image Slicing’s Kiss of Death

y9iF @Jcs?*{0http://www.alistapart.com/articles/sprites/51Testing软件测试网en+dz8{o/H [d

:q4tZ!|H!n7T0CSS Sprites Generator

[Y7l^j0http://www.csssprites.com/

IVqe}W5^~,c0

Fast Rollovers Without Preload

51Testing软件测试网8DE#lu7v1pd!A

http://wellstyled.com/css-nopreload-rollovers.html51Testing软件测试网 OiW#l2}

Javascrīpt Sprite Animation Using jQuery

51Testing软件测试网 [u3{z~)@2F `i

http://www.sitepoint.com/blogs/2007/07/20/javascrīpt-sprite-animation-using-jquery/51Testing软件测试网Z3cE QT~6q

CD*M%l m#ShBXd*m0http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/51Testing软件测试网p:Q+WCL[!F+B

How to create CSS sprites

V!P]]3SN[)M0http://fatagnus.com/how-to-create-css-sprites/51Testing软件测试网 hs(JNvN:|Tq

Creating Rollover Effects with CSS Sprites51Testing软件测试网5sz
A!O^

3Gs[YH;L1W0http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/51Testing软件测试网,y2]U | k$D

Building a Dynamic Banner with CSS Sprites51Testing软件测试网D5hr(Wc:L.q%eQ

:a3c$@K^`AUD*a'm/F0http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/51Testing软件测试网
S eL0_H-cq

CSS Sprites and IE/Win Flicker Issue51Testing软件测试网3C"m}@R6Tc h@

51Testing软件测试网;QZL/Z/eS Z.H

http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/

+r6N:k&v,ME0

7i0jHU0Tij)[`7Q0css用法测试工具：CSS tests and experiments

51Testing软件测试网V2T-f TM(FT

http://www.brunildo.org/test/index.html51Testing软件测试网4s+P {xI@/_C,@