一道经典的面试题：请列出三种减少页面加载时间的方法？
图片精灵（Image Sprites）就是其中一种方法。
图像精灵是放入一张单独的图片中的一系列图像。
包含大量图像的网页需要更长时间来下载，同时会生成多个服务器请求。
使用图像精灵将减少服务器请求数量并节约带宽。
雪碧图
图片精灵也被称为雪碧图，因为我们常喝的雪碧的英文就是Sprites。Image Sprites被翻译成雪碧图也就不奇怪啦。
如下就是一张典型的雪碧图：
HTML：
<div class="start"></div>
CSS：
.start {
width: 42px;
height: 42px;
background-image: url(https://y.gtimg.cn/mediastyle/mobile/app/share/img/sprite_play.png?max_age=2592000&d=20151203183007);
background-size: 40px 350px;
background-position: 0 -30px;
background-repeat: no-repeat;
}
上面的代码效果，Output输出红心一枚：JSbin
可以看出其实特别简单，有如下几个属性：
属性：
- background-image: url() 定义背景图
- width、height 设置宽高
- background-size 定义整个背景图的尺寸
- background-position 定义背景图的偏移
- background-repeat: no-repeat; 设置背景图不重复
