iconfont 与 SVG 的实际性能对比
下面我给你从 真实前端项目角度，讲一个你能立刻用得上的 iconfont vs SVG 性能对比。 不讲概念，一切围绕 渲染性能、包体、加载速度、内存、工程化 来分析。
🚀 一句话结论（给你先看）
性能层面：小量图标 → SVG 更好；大量图标 → iconfont 稍占优势（但很小）。 工程体验与灵活性：SVG 完胜。
🧪 一、渲染性能对比（浏览器实际表现）
✅ 1. 首次渲染速度（FCP）
| 方案 | 加载方式 | 首次渲染速度 |
|---|---|---|
| iconfont | 需要下载字体文件（一次） | 略慢（字体加载前图标会闪） |
| SVG | 分散在组件或 sprite 中 | 更快，无需等待字体解析 |
SVG 更快出现，不会闪一下变框框（FOIT 问题）。
✅ 2. 重绘与缩放性能
| 方案 | 缩放效果 | 性能表现 |
|---|---|---|
| iconfont | 字体矢量，无损 | 非常快，跟文字一样 |
| SVG | 原生 DOM 矢量图 | 同样非常快 |
📌 两者都基于矢量，缩放/重绘性能基本无差别。
🧪 3. 动画性能（尤其旋转/变色）
| 动画类型 | iconfont | SVG |
|---|---|---|
| 颜色 | ✔ 支持（靠 font-color） | ✔ 支持（fill/stroke） |
| 旋转 | ✔ 常用（loading） | ✔ 更细粒度控制 |
| 复杂动画 | ❌ 不行 | ✔ 强（path 动画、morphing） |
👉 SVG 的动画能力显著领先。 想做变形动画，比如按钮点击变形，只能 SVG。
📦 二、网络性能对比（包体 & 请求）
🧩 1. 请求数量
iconfont
✔ 只要 1 个字体文件请求 → 一次加载，所有图标到位 但缺点是：
- 即使你只需要 1 个图标，也要下载整个 iconfont（几十～几百个图标）
- 字体文件可能 50KB～150KB
SVG
两种用法：
🔹① 单个组件内引入（常用）
每个图标独立打包，但 Vite/webpack tree-shaking 会处理：
✔ 只打包用到的图标 ✔ 不会多加载未用的图标
🔹② SVG sprite (symbol) — 一个雪碧图
要一个请求，但文件更小（纯矢量 path）。
🧩 2. 文件体积对比（真实项目数据）
假设 100 个图标：
| 方案 | 文件大小（约） | 说明 |
|---|---|---|
| iconfont | 50–150 KB | 根据路径复杂度变化 |
| SVG sprite（全量） | 20–60 KB | 一般比字体更小 |
| SVG 单文件按需引入 | 5–20 KB | 只打包你引用的图标 |
👉 SVG 能更小，尤其按需引入时优势巨大。
🔧 三、工程化 & 维护成本（非常关键）
| 对比点 | iconfont | SVG（推荐） |
|---|---|---|
| 修改图标颜色 | 较简单（color） | 更强（fill/stroke） |
| 多色图标 | ❌ 不支持 | ✔ 原生支持 |
| 统一大小 | 需要字体缩放 | 更统一 |
| 动画 | 弱 | 强 |
| 设计师交付 | 字体/雪碧图 | 直接给 SVG（更方便） |
| 拓展性 | 差 | 强 |
| 构建体积 | 较大 | 可按需引入，最小 |
👉 SVG 在实际团队协作中体验比 iconfont 好太多。
🔥 四、实际性能总结（超简版）
| 性能点 | iconfont | SVG | 优势 |
|---|---|---|---|
| 渲染速度 | ✔ 很快 | ✔ 很快 | 平手 |
| 首次出现时间 | 慢一点 | 快 | SVG |
| 文件大小 | 中等 | 最小 | SVG |
| 请求次数 | 少 | 可按需 | 看情况 |
| 内存 | 少 | 少 | 平手 |
| 动画 | 弱 | 强 | SVG |
| 高清适配 | ✔ | ✔ | 平手 |
⭐ 最终推荐（前端行业共识）
📌 现代项目：优先 SVG
Vue、React、uniapp、小程序，都是 SVG 主流。
📌 iconfont 适用于：
- 需要兼容非常老旧的浏览器（尤其 IE）
- 图标都是单色
- 图标数量特别大但变化不多
- 你要同时做 H5 + 小程序并统一方案
（但现在很多 UI 库也做好了 SVG，小程序也支持 SVG 组件）
📌 如果你现在正在做 uniapp / Vue 项目，我建议你：
👉 用阿里 iconfont 导出 SVG 图标，而不是 iconfont 字体。
这样你既享受 iconfont.cn 的图标管理，又用上 SVG 的现代优势。