rel="preload"必须配as属性，否则浏览器静默忽略；需写在中后前，精准匹配资源类型（如as="font"需加crossorigin），仅用于首屏关键资源。
rel 属性不是装饰，写错或漏掉就等于没写——浏览器直接跳过那个 <link> 标签。真正“很少用但很有价值”的值，得满足两个条件：一是主流浏览器已支持多年、行为稳定；二是解决的是真实痛点（比如首屏卡顿、图标不显示、分页被索引错），而不是纯语义摆设。
rel="preload" 必须配 as，否则等于白写
rel="preload" 不是“提前加载”，而是“强制高优先级加载并缓存”，但它不会自动执行或应用，只管 fetch。
常见错误是只写：
<link rel="preload" href="/font.woff2">
这在 Chrome/Firefox 中完全无效——浏览器当普通 <link> 处理，不触发预加载。
- 必须带
as属性，且值要精确匹配资源类型：as="font"（字体）、as="script"（JS）、as="style"（CSS）、as="image"（图片） - 跨域字体必须加
crossorigin，否则加载失败且不触发onerror - 不能和
rel="prefetch"指向同一资源，会相互干扰甚至取消请求 - 只该用于首屏关键资源：核心字体、
内联 JS 所依赖的模块、首屏 hero 图
rel="preconnect" 对 CDN 域名有效，但路径不能带斜杠
rel="preconnect" 是建立 DNS + TCP + TLS 的完整预连接，比 dns-prefetch 更彻底，但开销也更大。
它只接受协议+域名，例如：
<link rel="preconnect" href="https://cdn.example.com">
- 错误写法：
href="@#@#@#@#@#@#@#@#@#@0"或href="//cdn.example.com"→ 浏览器忽略 - 同一域名只需一个
<link>，重复写无意义 - 不建议对超过 2–3 个第三方域名使用，否则可能挤占主站连接数
- HTTPS 站点下，
preconnect效果比dns-prefetch明显，尤其在弱网或首次访问时
rel="icon" 单写 href 已不可靠，必须带 type 和 sizes
现代浏览器（Chrome 94+、Safari 15.4+）对 favicon 的解析更严格。只写：
<link rel="icon" href="/favicon.ico">
很可能 fallback 到默认图标，或在标签页中不显示。
-
type必须明确：type="image/x-icon"（.ico 文件）type="image/png"（.png 文件） -
sizes推荐填写，尤其是多尺寸场景：sizes="16x16"、sizes="32x32"、sizes="192x192" - iOS 需额外加
rel="apple-touch-icon"，Android Chrome 会自动 fallback，但 Safari 不认rel="icon"
rel="manifest" 是 PWA 的硬性入口，但路径必须可公开访问且返回正确 MIME 类型
rel="manifest" 指向 Web App Manifest JSON 文件，是安装 PWA 的前提。
但它不像 CSS 那样容错：
-
href必须是绝对路径或根相对路径（如/manifest.json），不能是./manifest.json - 服务器必须返回
Content-Type: application/manifest+json，否则 Chrome 直接忽略 - 文件内
start_url和scope必须与当前页面同源，否则安装按钮不出现 - 不支持 query 参数（如
/manifest.json?v=2），缓存策略需配合Cache-Control控制
这些值都不算新，但踩坑率极高——因为它们的行为不是“锦上添花”，而是“开关级”的：开了就生效，错了就静默失效，连控制台警告都未必有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
