内联SVG通常最快：无额外HTTP请求、可CSS控制、支持无障碍；但体积大复用难，适合少量关键图标。
HTML 图标本身不会提升性能，反而用得不当会拖慢页面加载和渲染——关键不在“用不用图标”，而在“怎么加载图标”。
SVG 内联 vs 外链 <img> vs 字体图标，谁更快？
内联 <svg> 通常最快：没有额外 HTTP 请求，可被 CSS 控制颜色/大小，且支持无障碍（加 aria-hidden="true" 或 role="img"）。但体积大、复用难，适合少量关键图标（如 logo、按钮图标）。
外链 <img src="icon.svg"> 简单，支持缓存，但多一个请求；若图标多，HTTP 请求数叠加，首屏延迟明显。
字体图标（如 Font Awesome）已过时：字体文件体积大、加载阻塞渲染、无法抗锯齿、缩放失真、CSS 伪元素难以选中和读屏支持差。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优先选内联
<svg>（尤其首屏可见图标） - 非首屏或大量图标，用
<img>+ HTTP/2 多路复用 + 缓存头（Cache-Control: max-age=31536000） - 避免
@font-face加载图标字体，除非遗留系统强依赖
<link rel="icon"> 和 <link rel="apple-touch-icon"> 会影响首屏性能吗？
不会。这些是浏览器在页面解析完成后才发起的请求，不阻塞 HTML 解析、DOM 构建或渲染。但要注意：
-
favicon.ico必须放在根目录，否则浏览器会默认发 GET /favicon.ico 请求（404 也耗时） - 不要用 PNG 做
apple-touch-icon并丢在<head>里——iOS 会预加载它，哪怕用户没加到主屏幕 - 推荐提供多种尺寸（如 180×180、192×192），用
sizes属性明确声明，避免缩放计算开销
使用 <svg> 时哪些写法会悄悄变慢？
内联 SVG 不等于“一定快”。以下写法会引入隐性成本：
- 带完整
<defs>+<use>引用（尤其跨文件）：现代浏览器优化较好，但旧版 Safari 对<use>支持差，且引用失败时可能空白 - 未移除编辑器元数据（
id、inkscape:前缀、注释）：增大 HTML 体积，影响 gzip 效率 - 未设置
width/height或viewBox：触发浏览器重排（re-layout），尤其在 flex/grid 容器中 - 在
<svg>内写内联style或大量class：增加 CSSOM 构建负担，且无法复用样式
建议用工具（如 SVGO）压缩 SVG 源文件，再内联；对动态图标，用 currentcolor 替代硬编码 fill 值，便于主题切换。
真正影响性能的从来不是“图标存在”，而是“图标如何进入页面”以及“是否被浏览器当作关键资源处理”。很多团队花时间换图标库，却忽略 favicon 的 404 请求或 SVG 中残留的 20KB Inkscape 元数据——这些细节比选什么图标方案更值得先查。
