facebooke 合成图

google  和 face booke 的图标合成图

合成图方法

浏览一些大型专业网站，发现很多的 UI 稳定后都会用少数几张合成图来存放 UI 图片，在前台显示时用 css 和 js 位移来表现。这样做有几个好处：

1. 减少发送请求的次数，减少 post 到服务器的数据量。

2. 遇到鼠标经过需要变换图片的时候，不会有延迟造成体验上的缺陷。

 跨域名方法

另一个能够大量减访问时发送求情的数据量的方法就是跨域名访问图片。

很多网站的主站，和图片站主域名和静态文件服务器是不一样的：

校内       xiaonei.com        xnimg.cn
新浪       sina.com               sinaimg.cn
雅虎       yahoo.com           yimg.com
…

如果是同域名访问静态文件通过httpwatch 跟踪请求是这样的：

其中几乎一半甚至更多的字节数都被 cookie 这项占用了，但是向服务器发送 http 请求时，如果是静态文件则不用发送这条请求，因此，如果页面上有30张图片，其中就有一半的请求字节数是废的。而且请求是上传操作，比下载操作要稍慢一些

但如果跨域名访问图片，则不会带 cookie 这条去请求，因为cookie 是根据域名匹配的。在带宽昂贵，访问次数较高的大型网站，节省这部分带宽是非常有必要的。给用户的体验也会快很多。

因此如果有条件，还是为静态文件单申请一个域名吧~