CSS Sprite 雪碧图

CSS Sprite 雪碧图

为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。

说到雪碧图，我们需要稍微扯一扯，浏览器端优化。

在下面这篇文章在浏览器输入url到页面打开，都做了些什么？

我们知道了，http发出和响应的全过程。而要优化页面显示，加快速度，这个过程过程中大部分，我们是控制不了的，我们只能从浏览器端入手来找一些可以做的事情。那么，我们可以做些什么呢？

少发送请求
- 把要加载的js文件（css文件同理）合并成一个（尽量少）文件，则可以向服务器少发送请求，从而减少等待时间。
压缩文件
- 使用压缩之后的js、css、img文件，同样可以减少请求时间。这里可以使用gulp，webpack这些自动化工具
Css Sprite
- 这是css的一项技术，将图片尽可能多的合并成一个图片文件，第一次使用的时候加载这张图片，然后浏览器会缓存下来，其他地方再使用的时候就不需要重新请求了。
js／css位置
- css引用建议放在head标签里面；js脚本建议放到body内容的最后，原因：等待js加载或者脚本有错误的时候不会影响html页面的展示。

ps:更多详细内容可以看这里

百度速度统计及优化

github仓库

预览效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登陆框雪碧图 | 镜心书社</title>
</head>
<style>
*{margin: 0;
padding: 0;
}
.container{
	width: 220px;
	height: 400px;
	background: #ebfafa;
}
.login-form{
	padding: 15px;
}
.login-input{
	display: block;
	height: 32px;
	width: 188px;
	margin-top: 15px;
	border: 1px solid #adb6c9;
	border-radius: 3px;
	text-indent: 30px;
	font-size: 15px;
}
p{
	height: 13px;
	margin-top: 15px;
}
p label{
	font-size: 13px;
	vertical-align: top;
}
p a{
	font-size: 13px;
	text-decoration: none;
	float: right;
}
.btn{
	width: 190px;
	height: 38px;
	margin-top: 15px;
	border: 0;
	background: url(login.jpg) no-repeat;
	text-indent: -9999em;
	cursor: pointer;
}
.register-btn{
	background-position:0 -38px;
}
hr{margin-top: 20px;}	
</style>
<body>
	<div class="container">
		<form class="login-form">
			<input class="login-input" type="text" placeholder="邮箱/手机号/用户名" />
			<input class="login-input" type="password" placeholder="请输入密码" />
			<p>
				<input type="checkbox" id="autologin">
				<label for="autologin">下次自动登录</label>
				<a href="javascipt:;" title="">忘记密码？</a>
			</p>
			<input type="submit" class="btn login-btn" value="登录" />
			<input type="button" class="btn register-btn" value="注册" />
		</form>
	</div>
</body>
</html>

预览效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" http-equiv="Content-Type" content="text/html">
	<title>css sprite | 雪碧图</title>
	<style>
		h3,ul{margin: 0;padding: 0;}
		ul{
			list-style: none;
		}
		li{display: block;height: 31px;
			line-height: 31px;
			overflow: hidden;
			border-bottom: 1px solid #dedede;
		}
		li i{background:url(sidebar.png);
			display: inline;
			width: 30px;
			height: 24px;
			float: left;
			margin: 3px 10px 0 0;
		}
		li h3{
			font-size: 14px;
			font-weight:400; 
		}
		.cat{
			width: 150px;
			background: #f8f8f8;
			border:1px solid #bbb ;
		}
		.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 -144px; 
		}
		.cat-8 i{
			background-position:0 -168px; 
		}
		.cat-9 i{
			background-position:-40px 0px; 
		}
	</style>
</head>
<body>
	<div class="cat">
		<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>
			<li class="cat-9">
				<i></i>
				<h3>其他分类</h3>
			</li>
		</ul>
	</div>
</body>
</html>

雪碧图的优点：1、减少http访问次数；
缺点：1、内存缺陷；2、页面缩放有暴露风险3、对爬虫不友好
参考

CssGaga 生成雪碧图工具
 慕课网 CSS Sprite雪碧图应用