雪碧图
雪碧图的主要作用是减少 HTTP 请求数量。
假如你有 100 张小图片,你要发起 100 个请求。如果你合并成一个大图片,那你只需要发一个请求。
这在 HTTP/1 上是有不错的优化效果的,因为 HTTP/1 下不能充分利用 TCP 带宽,一个 TCP 同时只能有一个请求,请求太多就要排队,导致严重的阻塞。
到了 HTTP/2 因为多路复用特性的缘故,则没有太大必要了,所有的请求都是通过流的方式打散发送的,充分利用 TCP 的带宽。
另一个作用是 提前加载好需要用到的图片。
假设我们的一个按钮是用图片做的,hover 时会替换图片。如果分成独立的两个图片,hover 就会出现闪烁的效果。
这是因为图片还没有下载好,在图片完成下载前,显示的是空白,直到图片下载完成才替换上图片。
如果我们将按钮的所有状态都放到雪碧图了,就不会有这个问题了。当然还有一种方式就是通过 JS 手动做其他状态小图片的缓存。
标签:hover,HTTP,请求,TCP,雪碧图,图片 From: https://www.cnblogs.com/yangguanglei/p/17215202.html