内联svg在小图标（单个体积＜1kb）且复用少时加载快，复用多或体积大时拖慢首屏。

HTML图标本身不提升性能，选错加载方式反而拖慢首屏——关键不在“用不用图标”，而在“怎么塞进 HTML”。

内联 <svg></svg> 什么时候快，什么时候拖后腿

小图标（单个 <svg></svg> 体积

• 别把整个 icon set 都 <svg></svg> 内联进 —— 这等于把资源打包进 HTML 主文档，首字节时间（TTFB）直接受损
• <svg></svg> 必须带 viewBox，且显式设 width/height（推荐用 em 或 rem），否则默认 display: inline + baseline 对齐，视觉上“掉下来一截”
• 颜色控制靠 fill/stroke，别用 color 想当然继承——fill 不继承文字色，得手动写或用 CSS 变量

<img src="icon.svg"> 的隐藏代价

看似简单，但每个 <img> 都是一次 HTTP 请求，且加载失败或超时会阻塞 window.load 事件（尤其弱网下）。更麻烦的是缩放模糊和布局偏移问题。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 没设 width/height 属性 → 渲染时尺寸不定 → 触发重排（reflow），FOIT/FOUT 明显
• 用 background-image 替代 <img> 能规避部分问题，但失去语义、无法被屏幕阅读器识别
• SVG 文件若含冗余元数据（如 Illustrator 导出未清理），体积可能比 PNG 还大——务必用 svgo 压缩

favicon 加载静默失败的真凶

<link rel="icon"> 看似无害，但放错位置或配错头，会在某些安全策略下静默失败，且不报错——用户只看到默认图标或空白标签页。

• 必须用 .ico 格式（哪怕只是 16×16 和 32×32 两档），.png 或 .svg 作 favicon 兼容性差，Safari / Edge 可能忽略
• 别把 favicon.ico 放 CDN 上却不配 Access-Control-Allow-Origin: * —— 浏览器不会报 CORS 错，但图标就是不显示
• 开发阶段可临时注释掉整行 <link rel="icon">，对比页面 load 时间变化，真实影响常被低估

真正卡首屏的，从来不是图标本身，而是你把它塞进 HTML 的那个决定。内联、外链、雪碧、<use></use> 引用——每种方式都有明确的适用边界，混用或硬套方案，比不用还糟。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！