rel="preload"必须写对as值，否则资源白加载；浏览器靠as识别资源类型而非后缀，as="font"漏crossorigin会静默失败，as="fetch"等错配将降级或丢弃，漏as则请求不进加载队列。
rel="preload" 必须写对 as 值，否则资源白加载
浏览器靠 as 告诉它“这个资源是啥”，不是靠文件后缀猜。写错就降级处理，甚至直接丢弃：as="fetch" 会被当成 as="document"，as="font" 却没加 crossorigin，字体请求会卡在 CORS 预检失败。
常见匹配关系必须严格对应：
-
as="script"→ JS 文件（.js），不执行，只进内存缓存 -
as="style"→ CSS 文件（.css），会阻塞渲染，但可提前解析 -
as="font"→ 字体（.woff2等），必须配crossorigin，否则静默失败 -
as="image"→ 关键首屏图（.webp），需配合fetchpriority="high"
漏掉 as 或值非法，DevTools Network 面板里看不到该请求——不是没发，是根本没进加载队列。
prefetch 不是“预加载页面”，它只存文件到 HTTP 缓存
link rel="prefetch" 不执行 JS、不解析 HTML、不恢复表单状态、不触发任何生命周期钩子。你点跳转后，依然要 mount 组件、重拉接口、重新校验——它只解决“文件磁盘读取慢”这一个环节。
生效有三个硬条件，缺一不可：
- 必须写死在原始 HTML 的
里，动态插入（如document.head.appendChild()）90% 失效 - 目标 URL 必须同源（协议/域名/端口全一致），跨域请求浏览器连 DNS 都不查
- 浏览器得空闲：当前无高优先级请求、CPU 负载低、页面还没卸载
验证是否生效？跳转后打开 Network 面板，找目标资源，状态码要是 200 (from memory cache) 或 304，且 Initiator 列显示 prefetch。
stylesheet 和 icon 放错位置，页面可能白屏或图标不显示
link rel="stylesheet" 如果误塞进 ，浏览器不会报错，但样式加载延迟、FOUC（闪白）必然发生，某些浏览器还会阻塞后续 DOM 渲染；link rel="icon" 放错位置则图标大概率不显示——iOS PWA、Android Chrome 都依赖 中的声明来注册。
图标要适配多设备，不能只靠一个 .ico 文件：
-
sizes="16x16"和sizes="32x32"必须分开写两个<link>标签 -
sizes="any"只对rel="mask-icon"有效，对标准rel="icon"是无效值 -
type="image/x-icon"对.ico有用，但.png图标必须写type="image/png"，否则 Safari 可能忽略
Chrome DevTools 的 Application → Manifest 面板能直接看到哪些图标被识别，比肉眼判断靠谱得多。
preconnect 和 dns-prefetch 不是替代方案，它们解决不同层的问题
rel="preconnect" 是 TCP + TLS 握手预热，适用于确定要访问的第三方域名（如 CDN、分析服务）；rel="dns-prefetch" 只做 DNS 查询，开销更小，适合备用域名或 fallback 地址。
关键区别：
-
preconnect必须同源或显式允许跨域（crossorigin属性不能少），否则握手失败且无提示 -
dns-prefetch不受同源限制，但无法提前建连，只解决 DNS 延迟 - 两者都必须写在
，且建议放在所有preload之前——DNS 和连接建立是后续请求的前提
别对同一个域名同时写两个；preconnect 已包含 DNS 查询，再加 dns-prefetch 是冗余。
prefetch 和 preload 的语义边界：前者管“未来某页要不要用”，后者管“当前页马上要用”。混用不仅浪费带宽，还可能挤占关键资源的加载带宽——尤其在弱网下，一个错写的 prefetch 可能让首屏 JS 加载延后 300ms。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
