雪碧图

雪碧图

雪碧图的主要作用是减少 HTTP 请求数量。

假如你有 100 张小图片，你要发起 100 个请求。如果你合并成一个大图片，那你只需要发一个请求。

这在 HTTP/1 上是有不错的优化效果的，因为 HTTP/1 下不能充分利用 TCP 带宽，一个 TCP 同时只能有一个请求，请求太多就要排队，导致严重的阻塞。

到了 HTTP/2 因为多路复用特性的缘故，则没有太大必要了，所有的请求都是通过流的方式打散发送的，充分利用 TCP 的带宽。

另一个作用是 提前加载好需要用到的图片。

假设我们的一个按钮是用图片做的，hover 时会替换图片。如果分成独立的两个图片，hover 就会出现闪烁的效果。

这是因为图片还没有下载好，在图片完成下载前，显示的是空白，直到图片下载完成才替换上图片。

如果我们将按钮的所有状态都放到雪碧图了，就不会有这个问题了。当然还有一种方式就是通过 JS 手动做其他状态小图片的缓存。