网站前端优化:css sprite(Css压缩)

在web系统中，我们的每个按钮都会有图标,当我们加载页面的时候,会把这些图标一个个的请求下载过来。

如图:



这样http的请求很多，请求的资源多，时间长，对系统的性能有一些损耗。

优化：我们只需要请求一次，就可以读取所有的按钮图标，这样减少了http请求，

从而大大的提高页面的性能，也就是css Sprites.

整合所有的按钮图标到一张图片上，每个页面我们只需要请求一次就好了，

再利用css的background、background-repeat、background-position来定位图标,

这样看还可以减少图片的字节数，响应的速度。



整合后http请求如图：



同时这样也避免了对每个图标命名的烦恼,也利于后期图标的维护.

写法比较:

/*.icon-add {
background: url('icons/add.png') no-repeat center center;
}*/
.icon-add {
background: url('icons/icons.png') no-repeat -96px -81px;
}

推荐在线css sprite制作地址:http://alloyteam.github.io/gopng/