Web优化 --利用css sprites降低图片请求

sprites是鬼怪，小妖精，调皮鬼的意思，初听这个高端洋气的名字我被震慑住了，一步步掀开其面纱后发觉非常easy的东西。作用却非常大

什么是CSS Sprites

CSS Sprites是指把网页中非常多小图片（非常多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

JqueryUI的效果图例如以下

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFuX3lhbmt1bjIwMDk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

非常多页面经常使用的小图标。可是我们看看每一个小图标的源代码的时候会发现，这些小图标的src是同一个文件。都是这张大图

为什么要使用CSSSprites

姑且先无论这是怎么实现的，我们先来了解一下又好好的方法它不用为什么要用这样的怪异的方式，在代码书写和可读性上都有了一定程度的开销。这么干有什么优点能让人们放弃安逸的做法来用CSS sprites呢？

浏览器载入图片为堵塞形式

我们知道浏览器在载入网页的时候图片文件及外部的JS、CSS文件都须要单独下载，但JS是阻塞HTML下载进程的，图片是另外开启进程来下载的，不同的浏览器同一时候下载图片的数量的限制一般为一个或者五个或者十个，所以假设一个遍布了图片的网页，或者一系列网页，即使你网速再快也要分批次的下载这些图片。

图片下载为一次完整的http请求

每一个图片的下载都是一次完整的HTTP请求-响应。而把非常多小图片集中到一张图片上这样在仅仅须要一个HTTP请求-响应，在如今网速条件下不超过200k的图片下载速度是差点儿相同的，下载一次之后不管是该页面还是网站其他页面使用包括在这张大图上的图片的时候就能够使用缓存，不会带来重复下载的开销。所以仅仅有一个HTTP请求-响应。

Sprites降低HTTP请求

所以使用CSS sprites最大的优点就是降低HTTP请求，加快站点响应速度，提高站点性能。

或许会问，多几个HTTP请求真的会那么严重吗？假设使用一张大图，那么非常可能大图中有几个图片用不到。这不是多载入内容了吗。和多几次HTTP请求开销差距有那么大吗？

CSS Sprites实现

首先了解一下CSS的 background-position

background-position设置或检索对象的背景图像位置。必须先指定 background-image属性。

语法：

background-position: length || length

background-position: position || position

取值：

length :百分数
|由浮点数字和单位标识符组成的长度值。

如：

/* states and images */

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }

.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }

/* positioning */

.ui-icon-carat-1-n { background-position: 0 0; }

.ui-icon-carat-1-ne { background-position: -16px 0; }

我们看到使用的url为同一个图片，知识postion时，图片的锁定位置有变动。

小结：

CSS Sprites的缺点：凡事有利必有弊端。

可能有人喜欢，有人不喜欢，由于每次图片修改都要往这张图片加入内容，图片的坐标定位要非常准确会，会稍显繁琐。坐标定位要固定为某个绝对值，因此会失去如center的一些灵活属性。

CSS Sprites 有长处也有缺点。要不要使用，详细要看网页以载入速度为主还是以维护方便easy为主。