rel="preload" 必须写在html最前面、类型与as属性严格匹配、href路径完全一致，否则降级为low或不发起请求；需配合fetchpriority="high"和loading="eager"才能真正提升lcp。
rel="preload" 不是“加了就变快”，而是必须出现在正确位置、配对准确类型、路径完全一致，才能真正把资源调度优先级拉到 Highest——否则它大概率被降级为 Low 甚至不发请求。
preload 必须写在 最前面，且紧贴 后
浏览器只在 HTML parser 初期识别 rel="preload"，一旦开始构建 DOM 或遇到其他 （比如样式表），后续的 preload 就会被忽略。这不是延迟，是彻底不发起请求。
- ✅ 正确顺序：
<meta charset="utf-8">→<link rel="preload" ...>→<title></title>→ 其他资源 - ❌ 错误写法：放在
<link rel="stylesheet">下方、里、或用 JS 动态插入（document.createElement('link')） - ⚠️ 影响：首屏 banner 图若因此晚加载 200ms+，LCP 直接恶化
as 属性不能省，且必须严格匹配资源类型
漏写 as，或写成 as="img"、as="picture"、as=""，浏览器会当普通 fetch 处理，Priority 显示为 Low，Initiator 是 (Other) 而非 preload，缓存也无法被后续 <img src> 复用。
- 图片必须写
as="image"（不是img或picture） - 字体必须写
as="font"，且同步加crossorigin（同源也建议加crossorigin=""） - CSS 必须写
as="style"，并配onload="this.onload=null;this.rel='stylesheet'" - 脚本必须写
as="script"；若原<script></script>有integrity，preload 也得带上相同值
href 路径必须与最终使用处完全一致
大小写、斜杠、查询参数哪怕差一个字符，缓存就不命中——preload 下载一次，<img src> 再发一次请求，白占带宽。
- ❌ 错误示例：
href="./banner.jpg"（相对路径歧义）、href="/img/banner.jpg?v=1"但<img src="/img/banner.jpg?v=2"> - ✅ 正确做法：用绝对路径或根相对路径；确保和
src/href字符串逐字相同 - ⚠️ 注意：
srcset和sizes不支持 preload；只适合尺寸/格式确定的单图
preload 后仍需配合 fetchpriority="high" 和 loading="eager"
rel="preload" 只负责提前下载进缓存，不触发解码、不占布局、也不影响渲染调度。如果对应 <img> 标签没显式声明优先级，浏览器可能仍按默认 Medium 处理。
-
fetchpriority="high"仅在 Chromium 112+ / Edge 112+ / Opera 98+ 生效（Safari/Firefox 忽略），它是提示而非强制，但能减少启发式判断偏差 -
loading="eager"必须设，否则 lazy 启发式策略可能先发起一次加载，再 fallback 补一次，导致重复请求 - ⚠️ 别滥用：
fetchpriority="high"对已 preload 的 URL 无效——preload 本身已锁定 Highest 优先级
最容易被忽略的是 crossorigin 和路径一致性：跨域图片漏加 crossorigin，请求静默失败；路径大小写不一致，两次请求白跑。这些错误在 Network 面板里没有报错，只显示 net::ERR_FAILED 或状态为 (blocked)，得靠 Initiator 和 Priority 列交叉验证。
