fetchpriority="high"仅对和有效，chrome 112+/safari 17.2+支持，firefox忽略；需src/srcdoc直出、避免与loading="lazy"共存，且首屏图必须设loading="eager"。
fetchpriority="high"该加在哪些标签上
只对 <img> 和 <iframe></iframe> 有效，<script></script>、<link rel="stylesheet">（除 Chromium/Safari 特定版本外）、<picture></picture>、<source></source> 上写了也白写。Chrome 112+ 和 Safari 17.2+ 才识别，Firefox 完全忽略。
常见错误现象：给 <script src="app.js"></script> 加 fetchpriority="high"，Network 面板中 Priority 仍是 Medium——不是写错了，是浏览器压根不读这个属性。
-
src或srcdoc必须在 HTML 源码中直接存在，不能是空值、data-src或 JS 后续注入 - 已用
<link rel="preload" as="image">预加载的图，再加fetchpriority="high"无意义——preload 本身已锁定 Highest - 和
loading="lazy"共存时，Chrome 会强制降级为 Low，lazy 逻辑优先级更高
preload 的 as 属性写错等于没写
as 不是可选字段，它决定请求头、CORS 策略、缓存分区和最终 Priority。漏写或类型不匹配，Priority 直接掉到 Low，跟普通 fetch 一样。
典型错误：预加载字体却写 as="font" 却没加 crossorigin，Chrome 120+ 默认启用 CORS 检查，结果字体下载完也不渲染，控制台静默失败或报 Failed to decode downloaded font。
-
as="style"必须配onload="this.onload=null;this.rel='stylesheet'"，否则只下载不解析 -
as="script"若原<script></script>有integrity，preload 也得带上，否则缓存不复用 -
as="image"不支持srcset或sizes，只适合尺寸/格式确定的单图
首屏图片必须设 loading="eager"
首屏图若漏设 loading="eager"，可能触发两次加载：一次是 lazy 启发式策略提前发起（因靠近视口），另一次是浏览器 fallback 补发，浪费带宽且干扰 Priority 判断。
验证方式很简单：打开 Chrome DevTools → Network → 勾选 Priority 列，首屏图应显示为 Highest 或 High；若仍是 Medium，大概率是没加 loading="eager" 或 src 未在 HTML 中直出。
- 非首屏图用
loading="lazy"+preload="none"组合更稳，避免初始带宽挤占 -
fetchpriority="low"不必和loading="lazy"叠加——后者本身已走低优先级队列，再加 low 是冗余 - 背景图（
background-image）完全不受fetchpriority影响，关键图必须用<img>标签
link rel="stylesheet" 的 fetchpriority 效果不稳定
只有 <link rel="stylesheet"> 在 Chromium 112+/Safari 17.2+ 中部分支持 fetchpriority，但效果受三重压制：CSS 天然阻塞渲染，默认就是 High；缓存命中时 Priority 显示为 Medium（不是失效，是调度器认为无需抢占）；多个样式表并存时，HTML 出现顺序仍起主导作用。
最常被忽略的一点：href 若含 data- 占位符且被 JS 动态替换，该 fetchpriority 视为无效——属性只在 HTML 解析阶段读取一次。
- 不要给
<link rel="preload">加fetchpriority：preload 已锁定 Highest，属性被静默丢弃 - 验证是否生效，唯一可靠方式是看 Network → Priority 列，而非检查 HTML 是否写了属性
- Safari / Firefox 的 Network 面板不显示 Priority 列，别在这两个浏览器里调试这个属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
