前言
我们都知道,HTTP 协议即超文本传输协议,是 Web 应用的基础,HTTP 协议又是基于 TCP 协议的,而 TCP 连接的建立是需要时间和资源的。当网页加载时,会需要下载图片资源,如果有非常多的小图片,就需要建立很多 TCP 连接。
但勤劳勇敢的前端工作者们,想到把所有小图片放到一张图片里面去,这样就可以通过一次 TCP 连接,下载所有的小图片,再通过前端的奇技淫巧,来展示正确的图片。这种由很多小图片组成的图片,被称为雪碧图,雪碧图在节约 TCP 连接的同时,也为爬取带来了难度。
定义
CSS 雪碧图集 CSS Sprite,也被称为 CSS 精灵,是一种 CSS 图像合成技术,该技术是将小图标和背景图像合成到一张图片中,然后利用 CSS 的背景定位来显示需要显示的图像部分。
CSS 雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,然后使用 CSS 中的 background 和 background-position 属性进行渲染,但当图片数量更多更复杂时,定位就需要更加准确,可能就会用到更多的数值来到达更准的定位。
雪碧图的优缺点
通过前面的描述,可以很清楚地知道雪碧图有如下优点:
- 减少加载网页图片时对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量;
- 减少图片加载所需要的时间,提高页面的加载速度。
除了上述优点,雪碧图还有一些无法避免的缺点:
- 雪碧图的最大问题是内存使用,因为雪碧图中会有大量的留白空间;
- 影响