什么叫 “雪碧图”？
2020-12-17 08:38:08
雪碧图，英文原名叫 CSS sprites，更正确的叫法应该是“精灵图”。
sprite 指的是精灵，在 2D 游戏开发中，有一个术语叫做 sprite，其实就是融合了各种资源的图片，图片里面可能会有一个角色的一套动作、或是组成背景的不同内容的块 tile 等等。游戏角色的行为（攻击、跳跃、蹲下等），表现出来其实就是不同图片的切换，状态很多，对应的图片很多，这样的话就要保存非常多的图片，这不太好维护。所以通常会将这个角色的所有动作放到一个图片上，当角色行为发生变化时，就修改位置和宽高信息截取到对应的状态图片。
前端开发者借鉴了这种做法，将一些小图片（比如图标）也都整合到一张大图片上，然后通过 CSS 的 background-position 属性来定位显示需要的部分。这种做法就称为雪碧图（CSS sprites）。
以下是雪碧图的一些关键点和作用：
减少 HTTP 请求数量：这是雪碧图的主要作用。如果你有大量的小图片，每个图片都需要一个 HTTP 请求来获取，这会导致性能问题。通过将这些小图片合并成一个大图片（雪碧图），你只需要发起一个 HTTP 请求来获取整个雪碧图，然后通过 CSS 来定位显示需要的部分。这在 HTTP/1 协议下特别有用，因为 HTTP/1 下不能充分利用 TCP 带宽，一个 TCP 同时只能有一个请求，请求太多就会排队，导致严重的阻塞。然而，在 HTTP/2 协议下，由于多路复用特性的缘故，这个优化效果就不再那么显著了。
提前加载好需要用到的图片：雪碧图还可以用来提前加载好需要用到的图片。例如，一个按钮在 hover 状态时会替换成另一张图片。如果这两张图片是分开的，那么在 hover 状态时，如果图片还没有下载好，就会出现闪烁的效果。但是，如果我们将按钮的所有状态都放到雪碧图了，就不会有这个问题了。因为雪碧图在初次加载时就已经被下载到浏览器中了，所以后续的状态切换就不会再出现闪烁的问题。
以下是一些雪碧图的示例图片：
在使用雪碧图时，我们需要在 CSS 中通过 background-position 属性来定位显示需要的部分。例如：
总的来说，雪碧图是一种优化网页性能的技术手段，通过将多个小图片合并成一个大图片来减少 HTTP 请求数量和提高页面加载速度。虽然随着 HTTP/2 协议的普及和浏览器性能的提升，雪碧图的优化效果已经不再那么显著，但在一些特定的场景下（如需要减少 HTTP 请求数量或提前加载图片等），雪碧图仍然是一种有效的技术手段。
您可能感兴趣问答
热门标签
