第 4 卷

1. 你怎么理解CSS Sprites, 以及它在前端开发中的优势是什么(性能优化)?

✅ 什么是CSS Sprites（精灵图/雪碧图）

CSS Sprites是前端性能优化核心技术，核心逻辑：将页面中多个小图标、小背景图、小装饰图（如导航图标、按钮图标、列表图标）合并成一张单独的大图片（精灵图），然后通过CSS的

background-image（指定精灵图）+ background-position（精准定位到目标小图）+ background-size（可选缩放），实现只加载1张大图，却能显示多个小图的效果。

✅ 核心实现原理（简单示例）

Code block

1/* 精灵图总图片 */ 2.icon {

✅ CSS Sprites 核心优势（性能优化层面，面试必背）

• 🔥 优势1：大幅减少HTTP请求数量（核心核心！）
• 传统问题：每个小图标对应1个HTTP请求，若页面有20个小图标，就会发起20次HTTP请求；浏览

器对同一域名的并发请求数有限制（Chrome/Firefox默认6-8个），请求数过多会导致：

• 浏览器排队等待请求，页面加载缓慢

• 增加服务器连接开销和压力

• 多次TCP握手/断开，浪费网络资源

• 精灵图解决：所有小图合并为1张，仅需1次HTTP请求即可加载全部小图，直接减少90%+的请求

• 多张小图合并时，会自动去除每张小图的冗余空白区域，减少无效像素

• 图片压缩算法对单张大图的压缩效率远高于多张小图，合并后的精灵图体积 < 所有小图体积之和

• 示例：20张1KB小图总大小20KB，合并后精灵图仅12KB，节省40%体积

• 优势3：提升页面渲染性能，减少浏览器开销

• 减少HTTP请求的同时，也减少了浏览器对图片的解析、解码、渲染次数

• 避免浏览器频繁切换渲染上下文，降低CPU/GPU占用，页面渲染更流畅，尤其适配移动端低性能设

备

• 优势4：便于图片管理，提升开发效率

• 所有小图标集中管理在一张图中，无需单独维护几十个小图文件

• 新增/修改图标时，仅需在精灵图中调整，无需逐个修改图片路径

• 统一图标尺寸、风格，避免图标样式混乱

• 优势5：减少图片缓存开销

• 单张精灵图仅需缓存1次，后续页面访问直接从本地缓存读取，无需重新下载

• 多张小图需缓存多次，缓存管理复杂，易出现缓存失效问题

✅ CSS Sprites 使用注意事项（面试拓展）

1. ❗ 仅适用于小图（图标、小背景、小装饰），禁止用于大图（轮播图、详情图、海报图），否则

精灵图体积过大，反而影响加载

1. ❗ 合理规划精灵图布局：按行/列整齐排列，预留适当空白，避免小图重叠，便于后期新增图标
2. ❗ 定位精准度： background-position 坐标需精准，可借助工具自动生成（如Sprite Cow、

在线精灵图生成工具）

1. ❗ 适配Retina屏：需制作@2x/@3x精灵图，配合 background-size 缩放，避免图标模糊
2. ❗ 维护成本：若需大幅修改图标，需重新生成精灵图，建议版本化管理精灵图文件

✅ 适用场景 & 不适用场景

• ✅ 适用场景（必用）

• 导航栏图标、按钮图标、列表图标、分页图标

• 小尺寸背景图、装饰图、状态图（如√/×/loading）

• 移动端/PC端的高频小图标场景（电商、后台管理系统）

• 大尺寸图片：轮播图、商品详情图、海报图、banner图

• 动态变化的图片：用户头像、上传图片、实时更新的图片

• 数量极少的小图（如仅1-2个图标，无优化必要）

✅ 面试补充：现代替代方案

CSS Sprites是传统性能优化方案，现代开发中可结合以下方案使用：

• Iconfont 字体图标：替代简单图标，无图片体积，支持任意缩放/变色，HTTP请求更少

• SVG图标：矢量图，无失真，支持代码内嵌，无需图片文件

• Base64编码：超小图标转Base64嵌入CSS，无HTTP请求，适合1-2个超小图标

6. 解释物理像素、逻辑像素、像素密度的区别,说明移动端为何需要

@2x/@3x图片?

✅ 一、物理像素、逻辑像素、像素密度核心区别（面试必背定义）

• 1. 物理像素（设备像素 / Device Pixel）
• 定义：屏幕硬件上最小的物理显示单元，是屏幕出厂时固定不变的硬件属性，是真实存在的发光

点。

• 特点：

• 决定屏幕的实际分辨率（如iPhone 15物理像素：2556×1179）

• 数值越大，屏幕能显示的细节越多，硬件成本越高

• 开发中无法直接控制物理像素，由设备厂商决定

• 示例：

• 普通电脑屏幕：1920×1080 物理像素

• 华为Mate60：2700×1224 物理像素

• iPad Pro：2732×2048 物理像素

• 2. 逻辑像素（CSS像素 / Logical Pixel）
• 定义：前端开发中编写代码使用的像素单位（如 width: 100px、 font-size: 16px 中的

px），是抽象的、独立于设备的像素单位，用于描述页面元素的尺寸。

• 特点：

• 是前端开发的核心单位，开发者直接操作的像素

• 逻辑像素的大小可动态调整（如浏览器缩放、移动端viewport设置）

• 决定页面元素的视觉尺寸，与设备无关