资源压缩
资源压缩：gzip、brotli 文本压缩，WebP/AVIF 图片压缩。
#type / concept
#status / evergreen
#tech / dev / frontend
[!info] related notes
- 所属 MOC: 前端性能优化 MOC
- 前置概念: cdn-acceleration
- 并列概念: HTTP 缓存
资源压缩
一句话定义
资源压缩是通过降低传输体积让资源更快到达浏览器的优化手段，分文本压缩和图片压缩两类。
核心内容
文本资源压缩
| 压缩方式 | 说明 | 压缩比 |
|---|---|---|
| gzip | 最常见的文本压缩方式 | 3-10x |
| brotli | 通常比 gzip 更好 | 比 gzip 更优 |
对以下资源开启压缩：
- HTML
- CSS
- JavaScript
- JSON
- SVG
图片压缩
| 格式 | 适用场景 | 特点 |
|---|---|---|
| JPEG | 照片、复杂图像 | 有损、不支持透明 |
| PNG | 透明、精细图 | 无损、支持透明 |
| WebP | 通用场景 | 压缩率高，支持透明 |
| AVIF | 极致压缩 | 最新格式，压缩率最高，兼容需注意 |
| SVG | 矢量图标、简单图形 | 代码可压缩 |
数据压缩（接口层）
- 减少冗余字段
- 分页返回
- 增量返回
- 字段裁剪
- protobuf 等二进制协议（特定场景）
边界与易混淆点
压缩是”成本最低”的优化
压缩几乎不需要改动业务逻辑，只需服务端配置，是收益很高的优化手段。
图片压缩不是选格式就行
除了选格式，还需要：
- 尺寸匹配（不要 3000px 图片只显示 300px）
- 质量调优
- 响应式图片（srcset）