css精灵图（sprite）

前言

css 精灵图(sprite)，也叫雪碧图(因为sprite就是雪碧🤣)，也是一个平时用的比较少，在某些场景下可能会比较适合，因此这里也介绍一下精灵图使用的初衷和场景，以及使用方法

浏览器加载我们页面的流程

浏览器打开我们的页面时，大致经过了下面流程

输入网页对应的域名，通过域名解析等策略，得出需要访问的ip地址
建立链接发起请求，服务器响应并返回 HTML 内容
浏览器解析 HTML：浏览器接收到 HTML 内容后，开始对其进行解析。在解析过程中，浏览器会构建 DOM（Document Object Model，文档对象模型）树，将 HTML 中的标签和元素转化为 DOM 节点。同时，浏览器会识别 HTML 中引用的外部资源，如 CSS 样式表、JavaScript 文件和图片等
- 下载 CSS 文件：当浏览器在解析 HTML 中遇到 link 标签引用的 CSS 文件时，会发起新的 HTTP 请求来获取这些 CSS 文件。服务器响应这些请求，返回相应的 CSS 内容。浏览器在接收到 CSS 内容后，会构建 CSSOM（CSS Object Model，CSS 对象模型）树，用于表示样式
- 下载图片：当浏览器解析到 HTML 中的 img 标签时，会提取图片的 URL 地址，并发 HTTP 请求获取图片资源。服务器返回图片数据，浏览器在接收到数据后，会根据图片的格式（如 JPEG、PNG 等）进行解码和渲染。
- 下载 JavaScript 文件：如果 HTML 中包含 script 标签引用的 JavaScript 文件，浏览器会同样发起 HTTP 请求获取这些文件。在默认情况下，浏览器会暂停 HTML 的解析，优先下载和执行 JavaScript 代码，因为 JavaScript 可能会修改 DOM 结构或影响页面的渲染。执行完 JavaScript 后，浏览器继续解析 HTML。
渲染页面：当浏览器完成 DOM 树和 CSSOM 树的构建后，会将两者合并成渲染树（Render Tree），渲染树只包含需要显示在页面上的可见元素及其样式信息。然后，浏览器根据渲染树进行布局计算，确定每个元素在页面上的位置和大小，最后进行绘制，将页面内容显示在屏幕上。

通过流程发现问题

看到上面流程就能了解到，浏览器加载我们的图片时，是并发下载的，如果页面图片比较多的话，同时并发那么多请求，还是比较占用带宽时间的，此外浏览器一般最多同时并发6~8个请求，也就是数量过多的话，其中可能会存在阻塞，影响整体速度

因此引出了 css 精灵图

css 精灵图

css 精灵图(sprite)，也叫雪碧图(因为sprite就是雪碧🤣)

ps：精灵图比较适合使用频繁的小图，且一个单页面频繁使用的图标放到一个精灵图，使用时有利弊，需要合理取舍

在CSS中，在精灵图（Sprite）技术中，通常会将多个图标合并到一个透明背景的图像文件中，并且精灵图的图片内容不能重叠，然后通过CSS背景定位的方式来显示需要的图标。这种方法可以减少HTTP请求的次数，提高页面加载速度

在Web开发中，在以下几种场景下，使用CSS精灵图（CSS Sprites）可以非常适合：

图标和图像的合并：当你需要在页面上使用多个小图标或图像，而这些图标或图像在视觉上紧密相关，例如社交媒体图标、导航图标等，使用CSS精灵图可以减少HTTP请求的数量，提高页面加载速度。
减少HTTP请求：每个图像文件都是一个HTTP请求，特别是在移动设备上，减少请求次数可以显著提高页面加载速度。通过将多个小图像合并成一个大图像（精灵图），可以减少请求次数。
响应式设计：在响应式设计中，经常需要根据不同的屏幕尺寸显示不同的图像版本。使用CSS精灵图可以更容易地通过CSS控制显示不同部分的图像，从而实现响应式设计。
图标字体替代：在某些情况下，如果图标字体（如Font Awesome）不能满足设计需求或者需要更精细的控制，可以使用CSS精灵图来代替。这样可以避免字体文件带来的额外开销。
减少图像的重复加载：在单页应用（SPA）或需要频繁更新部分内容的页面中，使用CSS精灵图可以避免不必要的内容重新加载，提高用户体验。
优化性能：对于需要快速加载的网站，如电子商务网站或新闻网站，使用CSS精灵图可以减少加载时间，提升用户体验。
控制图像的显示：通过CSS精灵图，可以更容易地控制图像的显示部分，例如只显示一个图标的一部分而不是整个图标，这在制作复杂的布局时非常有用。

精灵图使用

合并图像：首先，将多个图标合并到一个图像文件中。这通常通过图像编辑软件如Photoshop完成。

CSS背景定位 ：在CSS中，使用background-image属性来指定精灵图，然后通过background-position属性来定位显示特定的图标

从使用上来说，精灵图的内容不能重叠，并且要了解到其精确的位置，不然可能会使用错误的图片

js 复制代码

.icon {
    width: 30px; /* 图标宽度 */
    height: 30px; /* 图标高度 */
    background-image: url('sprite.png'); /* 精灵图路径 */
    background-repeat: no-repeat; /* 不重复背景图 */
}

.icon-home {
    background-position: 0 0; /* 定位到精灵图中的第一个图标 */
}

.icon-settings {
    background-position: -30px 0; /* 定位到精灵图中的第二个图标，假设每个图标宽度为30px */
}

精灵图疑问

问题一：总量都是一样的，并且精灵图多了一些可能还大一些，为何说能够减少带宽和时间呢？

答：每个请求都是由请求头的，一旦图片数量多了，那么请求头的大小累计可能会超过精灵图增加的额外背景(并且一般背景占用比例很小很小)；至于节省时间，前面说了，浏览器可能也是处于整体性能和安全，大概限制了6~8个并发数量，过多的请求也会被引起后面的请求被阻塞，相当于路窄了，同行效率低了，因此时间就长了

问题二：图像合并后，使用图片的过程中，其被加载到内存中，假设每个图片都加载这么一个图片，那么会不会因为图片重复使用导致内存占用更大？

答：不会，每个图片公用一张图片，那么就是公用的一片公共内存，并且图片渲染时使用的数据，也是背景定位裁剪后的数据，整体上并不会有太大变化，只是可能定位裁剪的过程需要额外消耗一些性能罢了，如果卡顿到了这里，可以取消精灵图的使用

问题三：使用精灵图后，图片的释放怎么处理，图片怎么设计更好一些？

答：一个页面中经常使用的图片放置到精灵图中，其他的放到另一个精灵图或者就是不放，当图片不使用时，浏览器可能仍然会缓存图片，但内存紧张时，不使用的则会被回收，需要重新下载，因此可以将不经常使用与经常使用分开放，方便不使用内存回收，如果不能很好处理，在后台时，内存不足时，我们的网页也可能会因为内存占用过高而优先被销毁😂

最好

精灵图就先介绍到这里吧，一般项目也是用不到，如果有需要优化的，那么这可能就是一个优化点了，如果是一个着急的外包项目，建议该怎么干就怎么干，别什么技术不该上硬上，耽误时间不说，还会浪费我们学习休息的时间🤣