WEB程序性能优化之CSS Sprites

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

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

.M v(PEi051Testing软件测试网^Pqy"X+|8x H

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

}&N*WD(la4J0\:G0我这里做了一个小小的示例以供观者能更详细的了解这个小精灵。先看下面这个图片：

51Testing软件测试网qAA B@'J%AW

8M;Z*XZau0这张图片中有两个小图标是连在一起的，下面只需要使用以下css调整位置就可以只调用其中那个一张图片，或者调用两张图片，并且随意调整图标位置，我只是简单的用DIV显示一下：51Testing软件测试网,t,YDD,v

"Qe{3M_7f0`2M051Testing软件测试网!J3e@aI%N1Jli

<div style=”background-position: -10px -48px; width: 28px; height: 19px”>&nbsp;</div>51Testing软件测试网"i-~^T%~ua

6L7dRFfjkV051Testing软件测试网 H%NO0l8}J+rX

,X!u3T k6|0d0这一句就是显示那个问号，只要你的页面用到问号的统统这样调用就可以了，

$`1n_7K+gg0

调用第一个图标，显示效果见：Demo51Testing软件测试网;_5pe6@ u9F

-r*d$c@!|+t0此文主要把CSS sprites当成一种性能优化的手段，若要了解更详细的CSS sprites细节，可以参考以下网站：

中文资料http://realazy.org/blog/2007/10/08/css-sprites/

英文资料http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

在线制作工具http://www.csssprites.com/（本站Demo在此网站生成）

其他资源：

LkfWk6cT0What Are CSS Sprites?

tzhG2Y2jk,N0http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=151Testing软件测试网*B0g7^ X&w"MAY

? P M2Bm[`0CSS Sprites: Image Slicing’s Kiss of Death51Testing软件测试网R9k}U@I

&x$] rL2Q V5^~7J:\cp0http://www.alistapart.com/articles/sprites/

)@9g$Zt1B [/Y0

LkVw]-K$Eq,u0CSS Sprites Generator

51Testing软件测试网*@$xS U.G;n'F

http://www.csssprites.com/

6_y
@ ec&{"K0

Fast Rollovers Without Preload

51Testing软件测试网8p]3^Pc

http://wellstyled.com/css-nopreload-rollovers.html

4yX1q(sL/O%d7f3bh0

/c%N/y'mb-AA:Jh!l\Y [0Javascrīpt Sprite Animation Using jQuery

6x@~zZ:C!Ru0http://www.sitepoint.com/blogs/2007/07/20/javascrīpt-sprite-animation-using-jquery/

7x#mpP&E)tw051Testing软件测试网.K`k)P;[QHSo

http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/51Testing软件测试网&Gd7UP W#DN&B

'c/X3w,hN0How to create CSS sprites51Testing软件测试网b1j-^I&kX_fu;c

51Testing软件测试网_C.[6c#VZ
O4D ^9D

http://fatagnus.com/how-to-create-css-sprites/

U.l2R%V5X0

8^G/]$N5Z!p%Z0Creating Rollover Effects with CSS Sprites

l){o"v\'l5N0http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/51Testing软件测试网x-c2g{1`Eh

F+bn
Jn-|Q4d?b0Building a Dynamic Banner with CSS Sprites

{'yi:O%v6}6`0http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/

_5jdV]"x,~0

CSS Sprites and IE/Win Flicker Issue

AJa-G:^0http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/51Testing软件测试网*J5[i^+FfU7p&k

DZcL+W/c0css用法测试工具：CSS tests and experiments51Testing软件测试网Lw2L}E:i1b)T

%RY}$c0\1nc I0http://www.brunildo.org/test/index.html

Z8f2q \+mY6y!m0