CSS | 关于Spirit

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载。浏览器加载外部资源是按需加载的，用则加载，不用则不加载。
像一个按钮的三种状态，link会首先加载，而hover和active会在触发时才会加载。这样当link向hover切换时，hover向active切换时，由于图片的加载，会出现闪白的问题（只有浏览器第一次加载的时候会出现，之后加载会有缓存）
为解决这个问题，雪碧图应运而生。把按钮的三种状态图片放到一张图中，当link状态图首先加载的时候，会把其他状态的图片都加载完毕

雪碧图使用场景

1. 静态图片，不随用户信息的变化而变化
2. 小图片，容量比较小
3. 图片加载量比较大

使用雪碧图的目的

减少http请求数量，加速内容显示。每请求一次，就会和服务器建立一次连接，而建立连接是需要额外时间的。因此，选择雪碧图可以很大程度减少请求时间。

雪碧图的使用步骤

1. 先确定要使用的图标
2. 测量图标大小
3. 根据测量结果创建一个元素
4. 将雪碧图设置为元素的背景图片
5. 设置一个偏移量以显示正确图片