rel="preload"必须置于最前、后前，且as属性须精准匹配资源类型（如as="font"需配crossorigin），否则降级为低优先级fetch请求。
Link 标签的资源优先级调度不是靠堆属性实现的，而是由 rel 类型、位置、浏览器解析阶段共同决定的；写错 rel 值、放错位置、漏配 as，fetchpriority 就是摆设。
rel="preload" 必须出现在 head 最前面且带准确 as
preload 是唯一能显式提升请求优先级的合法方式，但它只在 HTML 解析初期生效。写在 里、JS 动态插入、或跟在多个 <link rel="stylesheet"> 后面，请求根本不会发出。
- ✅ 正确顺序：
<meta charset>→<link rel="preload" href="font.woff2" as="font" crossorigin>→<title></title> - ❌ 错误写法：
<link rel="preload" href="icon.png">（漏as="image"→ Priority 显示为Low，Initiator 是(Other)） - ⚠️
as必须严格匹配：字体用as="font"、CSS 用as="style"、图片用as="image"；写成as="img"或as="picture"直接失效 - 跨域字体/图片必须加
crossorigin，哪怕服务端已配 CORS 头——不加就静默失败，Network 面板显示net::ERR_FAILED
rel="stylesheet" 的 fetchpriority="high" 多数时候只是确认，不是提升
fetchpriority 在 <link rel="stylesheet"> 上只对 Chromium 112+ 和 Safari 17.2+ 有效，Firefox 完全忽略；而且它不改变浏览器默认的 High/Highes 调度逻辑，只在特定条件下起提示作用。
- CSS 加载天然阻塞渲染，浏览器默认就给最高优先级，
fetchpriority="high"往往只是“确认”而非提升 - 缓存命中时，Network 面板 Priority 显示为
Medium—— 不是失效，是调度器认为无需抢占带宽 - 多个样式表并存时，浏览器按 HTML 出现顺序 + 渲染依赖推导优先级，
fetchpriority无法逆转顺序 - href 含 JS 动态拼接（如
data-src占位符被脚本替换）→ 属性视为无效，Priority 不变
rel="prefetch" 不抢带宽，但写错就彻底静默
prefetch 只在 window.onload 触发、主线程空闲、网络无高优任务时才发起请求，Priority 固定为 Low；它不参与当前页竞争，但写错 as、路径、同源规则，请求连影子都不会有。
- 必须用绝对路径或根相对路径（
/js/next.js），./next.js或协议相对//cdn.com/xxx都会解析失败 -
as不是可选：预取 JS 写as="script"，HTML 页面写as="document"，漏写或写错（如as="js"）→ 浏览器降级为普通 fetch，Network 里看不到 prefetch 条目 - 动态插入的
<link rel="prefetch">99% 无效——HTML 解析期已过，浏览器根本不认 - 同一 URL 若同时被
preload和prefetch声明，会发两次请求，缓存分区不同，无法复用
验证优先级是否生效，只看 Network 面板三个字段
别信代码写了就起作用。打开 Chrome DevTools → Network 面板 → 刷新页面后做三件事：
- 右键表头勾选
Priority列（Safari/Firefox 不支持，别在这俩里验证） - 筛选
Initiator列：确认是preload、parser还是(Other) - 检查
Start Time：关键资源应在 TTFB - 注意：Chrome 默认隐藏 prefetch 请求，需手动在左上角过滤器输入
prefetch
真正容易被忽略的是浏览器空闲时机和缓存状态——prefetch 没请求，大概率不是你写错了，而是页面还没 onload；fetchpriority 显示 Medium，大概率是资源已缓存，不是属性没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
