雪碧图 CSS sprite 优化性能

雪碧图 是利用css 的一种图片合成技术， 它使用的主要是background 和background-position 两个属性，调整背景图片的位置，在不同的地方显示不同的图片。

雪碧图最常应用于网页中的一系列图标，logo等，当一个页面中的图标数量很多时，我们可以考虑将所有图标合成一张大图片，即雪碧图，通过background-position调整可以显示这张大图片的不同部位。例如下面这张雪碧图，

（sprite.png,每个图标的宽是30px，高是24px）

下面的代码是应用雪碧图

<span style="white-space:pre">		</span>li i{
		<span style="white-space:pre">	</span>background: url(sprite.png);
		<span style="white-space:pre">	</span>display: inline;
		<span style="white-space:pre">	</span>width: 30px;
		<span style="white-space:pre">	</span>height: 24px;
		<span style="white-space:pre">	</span>float: left;
		<span style="white-space:pre">	</span>margin: 3px 10px 0 0;
	<span style="white-space:pre">	</span>}
<span style="white-space:pre">		</span>.cat-1 i{
			background-position: 0 0;
		}
		.cat-2 i{
			background-position: 0 -24px;
		}
		.cat-3 i{
			background-position: 0 -48px;
		}
		.cat-4 i{
			background-position: 0 -72px;
		}
		.cat-5 i{
			background-position: 0 -96px;
		}
		.cat-6 i{
			background-position: 0 -120px;
		}
		.cat-7 i{
			background-position: 0 -148px;
		}
		.cat-8 i{
			background-position: 0 -172px;
		}

<span style="white-space:pre">		</span><ul>
			<li class="cat-1">
				<i></i>
				<h3>服装内衣</h3>
			</li>
			<li class="cat-2">
				<i></i>
				<h3>鞋包配饰</h3>
			</li>
			<li class="cat-3">
				<i></i>
				<h3>运动户外</h3>
			</li>
			<li class="cat-4">
				<i></i>
				<h3>珠宝手链</h3>
			</li>
			<li class="cat-5">
				<i></i>
				<h3>手机数码</h3>
			</li>
			<li class="cat-6">
				<i></i>
				<h3>办公家电脑</h3>
			</li>
			<li class="cat-7">
				<i></i>
				<h3>护肤彩妆</h3>
			</li>
			<li class="cat-8">
				<i></i>
				<h3>母婴用品</h3>
			</li>
		</ul>

效果如图

分析总结：

1.当页面中有大量图片时，若每张图片都独立加载，每张图片都是通过http请求服务器，会大大增加服务器的压力和页面的加载时间，但是如果使用雪碧图，则只需加载一张合成的大图，其余的通过css调整，虽然css代码会变得复杂点，但是并不会太大影响网页性能

2.移动端web对网页的性能要求是极高的，建议做移动端的可以从雪碧图开始

3.然而，页面中有些图片并不能使用雪碧图合成。例如，banner中的宣传大图，类似这种动态更新的图片是不建议使用雪碧图的。