请解释你对 CSS Sprites 的理解。
考察说明
考查候选人对前端性能优化中图片合并技术的理解，包括原理、优势、实现方式及局限。
回答思路
- 【回答框架 1】CSS Sprites 是一种前端性能优化技术，通过将多个小图标或小图片合并到一张大图中，再利用 CSS 的 background-position 属性精确控制显示区域，从而减少 HTTP 请求数量。其核心机制是页面加载时只需请求一张合并图，而非每张小图一个请求。
- 【回答框架 2】优势在于显著减少网络请求次数，提升页面加载速度，尤其是在图片较多的小图标场景下；同时可减少图片总体积，因为多张小图的额外文件头等开销被合并。
- 【回答框架 3】实现主要借助 CSS 背景定位：为每个目标元素设置 background-image 为精灵图，并通过 background-position 设置负值坐标来展示对应位置的小图，必要时还需设置背景图尺寸。
- 【回答框架 4】局限性包括：开发和维护成本较高，新增或修改图标需要重新合并并调整坐标；图片无法按需裁剪，可能下载无用部分；在高 DPI 屏幕下需要额外处理，如使用多张不同分辨率的精灵图。
- 【回答框架 5】适用场景是图标数量固定且不易变动的静态页面；对于图标频繁变动或需要动态加载的场景，更推荐使用 CSS 变量、内联 SVG 或字体图标等方式。
- 【关键点 1】核心是合并小图减少 HTTP 请求，通过 background-position 展现局部。
- 【关键点 2】优势是减少请求数和总体积，提升加载性能。
- 【关键点 3】维护成本高，图标变更需重新合并和调整坐标。
- 【关键点 4】适用于静态图标集，不适合频繁更新的场景。
- 【关键点 5】高 DPI 下需提供多分辨率精灵图或采用其他方案。
- 【易错点 1】不能简单认为合并所有图片都能提升性能，图片过多合并会导致单张图过大，首屏加载变慢，需权衡。
- 【易错点 2】使用 background-position 时坐标计算易出错，需精确测量像素。
- 【易错点 3】忽略背景图被裁剪时可能需要 background-size 调整，避免显示异常。