fetchpriority="high"仅在chromium 112+生效，是对关键首屏图片的优先级提示而非强制提速，需配合src使用且不可滥用；preload必须精准指定as值并正确配置crossorigin，否则静默失效；loading="eager"必用于首屏图以避免重复加载。
fetchpriority="high"对首屏图片是否真有效
只在 Chromium 112+（Chrome/Edge 112+、Opera 98+）中生效，Safari 和 Firefox 完全忽略该属性。它不是开关，而是提示：浏览器默认把所有 <img> 标为 Medium 优先级，fetchpriority="high" 的作用是防止关键图被降级，而非“提速”。如果这张图已是 LCP 候选元素，且未设 fetchpriority，它大概率仍会被浏览器自动提权；但显式声明能减少启发式判断的不确定性。
常见错误现象包括：首屏 Hero 图在 Network 面板中 Priority 显示为 Medium 或 Low，FCP/LCP 指标波动大。验证方式很简单：打开 Chrome DevTools → Network → 右键表头勾选 Priority，看目标请求是否显示 Highest 或 High。
-
fetchpriority="high"必须配合src存在，不能用于background-image或 JS 动态创建的<img> - 不要给所有图片加
high：浏览器会把它们统一归入 High 队列，反而稀释真正关键资源的调度权重 - 若已用
<link rel="preload" as="image">预加载同一张图，fetchpriority就失效——preload 本身已锁定Highest
preload 要不要加 crossorigin 属性
必须加，尤其对字体和跨域资源。不加 crossorigin 的 <link rel="preload" as="font"> 在多数情况下直接失败，字体不会加载，控制台报错 Failed to decode downloaded font 或静默忽略。原因在于字体属于 CORS 资源，即使同源也需显式声明 crossorigin（可为空值：crossorigin=""），否则浏览器按匿名模式处理，导致解码失败。
常见错误现象：页面文字渲染异常（回退到系统字体）、字体加载无网络请求、DevTools 中该 preload 请求状态为 (blocked) 或 net::ERR_FAILED。
-
as="font"、as="script"、as="style"（当 CSS 来自跨域 CDN）都必须带crossorigin -
as="image"和as="video"通常不需要，除非图片/视频托管在跨域且响应头未设Access-Control-Allow-Origin: * - preload 的
href必须与最终<img src>或@font-face src完全一致（含查询参数），否则缓存不命中
loading="eager"和loading="lazy"怎么配
首屏图片必须设 loading="eager"，否则可能触发两次加载：一次由 lazy 启发式策略提前发起（因靠近视口），另一次由浏览器 fallback 行为补发。移动端尤其明显，iOS 15.4 以下 Safari 完全忽略 loading 属性，没设 eager 就等于裸奔。
非首屏图片用 loading="lazy" 是稳妥选择，比 JS 实现的懒加载更轻量、更可靠，且能配合浏览器滚动预测优化。但它只对原生 <img> 和 <iframe></iframe> 生效，对 CSS background-image、JS 动态插入的 <img> 无效。
- 首屏图定义：DOM 中位置在视口内，或紧邻视口下方（
getBoundingClientRect().top ） - 轮播图第二张起、折叠区域内容、页脚广告图，一律用
loading="lazy" - 设了
loading="lazy"再加fetchpriority="low"是冗余操作——lazy 本身已触发低优先级队列
preload 加错资源反而拖慢首屏
preload 不是“越多越好”，它是高优先级资源提示，写错等于抢带宽、挤掉 HTML 或关键 CSS。浏览器会把 preload 资源排进 Highest 队列，一旦填满连接数或带宽，就会延后其他关键资源（如 HTML 主文档、内联 CSS 后续的 JS）的下载。
常见错误现象：Network 面板里 document 请求的 TTFB 正常，但 FCP 前出现长空白，且空白起点紧挨着某个 preload 请求；或者多个 preload 请求的 Priority 都是 Highest，但实际页面渲染卡顿。
- 只对「当前导航立刻要用」的资源用 preload：
as="font"（首屏字体）、as="style"（首屏 CSS）、as="script"（异步模块中马上要import()的 chunk） - 别 preload 图片：
<img src>本身已支持fetchpriority和浏览器启发式调度，preload 只会重复请求 - 别 preload JS 入口文件（如
main.js）：它已被<script defer></script>覆盖，再 preload 属于冗余调度
最容易被忽略的是：preload 的 as 值必须准确，否则浏览器可能忽略或降级为普通 GET。比如漏写 as="font"，字体 preload 就失效；写成 as="image" 却加载 JS，浏览器根本不会执行。这不像开发时的语法错误会报错，而是静默失败——你得靠 Network 面板里的 Priority 列和 Initiator 字段去确认它是否真的起了作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
