HTML图标本身不提升性能，关键在加载方式：内联SVG无HTTP请求、可Gzip压缩、支持CSS控制，但需控制单个体积≤2KB；避免滥用<use>导致DOM膨胀，慎用图标字体。
HTML图标本身不直接提升性能，但用对了能显著降低资源开销——关键不在“用不用”，而在“怎么用”。
为什么 inline SVG 图标比 <img> 更轻量
每次用 <img src="icon.png">，浏览器就得发起一次 HTTP 请求、解码位图、创建图像纹理。而内联 <svg> 是纯文本，随 HTML 一并解析，无额外请求，也不触发图片解码流水线。
- 体积通常只有 PNG/SVG 文件的 1/3～1/2（尤其小图标），且可被 Gzip 压缩得更彻底
- 无需考虑跨域或 referrer 策略干扰加载
- 支持 CSS 控制颜色、尺寸、动画，避免为 hover/active 状态准备多套图片
- 注意：不要把整页 SVG 全塞进 HTML —— 过长的内联 SVG 会拖慢 HTML 解析，建议单个图标控制在 2KB 以内
<use> 复用 SVG 符号时的 DOM 膨胀风险
用 <svg><defs><symbol id="home">...</symbol></defs></svg> + <use href="#home"> 看似优雅，但每个 <use> 都会在 DOM 中生成完整副本（不是引用），10 个 <use> 就等于 10 份路径节点。
- 适合复用频率低、图标数量少（≤5 个）的场景
- 超过 10 次复用时，改用 CSS background-image 或字体图标更省内存
- 若必须用
<use>，确保<symbol>定义在<body>底部或通过document.getElementById动态注入，避免阻塞首屏解析
Font Awesome 等图标字体的隐藏代价
图标字体看似方便，但现代项目中已成性能隐患：
立即学习“前端免费学习笔记（深入）”；
- 字体文件（.woff2）普遍 80–200KB，即使只用 3 个图标，也得下载全部字形
- 需要等待字体加载完成才能渲染，易出现 FOIT（Flash of Invisible Text）或 FOUT
- 无法用 CSS 精确控制描边、渐变等矢量属性（受限于字体轮廓）
- 替代方案：
svg-sprite-loader（Webpack）或vite-plugin-svg-icons（Vite）打包成单个内联 sprite，按需引入，体积可控
响应式图标要防住 viewBox 缩放失真
很多 SVG 导出时没设好 viewBox，导致用 width/height 缩放后线条模糊、锯齿明显。
- 正确写法：
<svg viewBox="0 0 24 24" width="24" height="24">——viewBox必须与原始设计画布一致 - 禁止用
style="transform: scale(0.5)"缩放 SVG，这会触发重绘且失真；应改用width/height配合viewBox - 如需适配高 DPI 屏幕，优先用
px单位设定尺寸（而非em），避免浏览器插值计算
真正影响性能的从来不是“图标该不该用”，而是你是否清楚每种写法背后触发的解析路径、内存分配和渲染阶段。一个没设 viewBox 的 SVG，比十个优化过的 PNG 更拖慢首屏。
