as="image"不可省略，否则浏览器按普通fetch处理，不走图片解码管线、不进图片专属缓存、优先级降为Low；href必须为静态准确路径（如"/assets/logo.webp"），否则404或缓存不命中。
必须用 <link rel="preload">，且 as="image" 和静态准确路径缺一不可；其他写法要么无效，要么白忙活。
为什么 as="image" 不能省
不写这个属性，浏览器就当普通 fetch 请求处理：不走图片解码管线、不进图片专属缓存池、请求优先级被降级——你写了 <link rel="preload" href="/logo.webp">，实际效果可能和 fetch("/logo.webp") 差不多，完全达不到预加载目的。
-
as="img"或as="picture"都无效，只有as="image"被标准认可 - 即使你用 WebP，也别加
type="image/webp"，浏览器按响应头识别格式，加了反而可能被忽略 - 字体、脚本、CSS 的
as值各不相同，但图片只认image
href 路径怎么写才不 404
相对路径是按 HTML 文件所在位置解析的，不是按当前 URL 或 JS 执行位置。写错一个斜杠或层级，就 404，流量白跑。
- HTML 在
/user/profile.html，想加载/assets/logo.webp，就得写href="/assets/logo.webp"（根相对路径）或完整 URL -
href="./assets/logo.webp"很危险：如果 HTML 部署在子路径如/blog/index.html，它会去请求/blog/./assets/logo.webp，大概率失败 - 构建工具生成哈希文件名（如
logo.a1b2c3.webp）时，href必须同步更新，硬编码logo.webp会导致预加载失效
fetchpriority="high" 有什么用、什么时候加
这是 Chrome 101+ 才支持的提示项，能抬高请求在网络队列中的优先级，对首屏关键图有实际收益；旧版浏览器直接忽略，无副作用。
立即学习“前端免费学习笔记（深入）”；
- 适合搭配
as="image"一起用，比如<link rel="preload" as="image" href="/banner.jpg" fetchpriority="high"> - 不要给所有预加载都加——它只对“必须 1 秒内显示”的图有意义；非关键图加了反而挤占带宽
- 它不能替代
as="image"，也不是兼容性兜底方案；没as="image"，fetchpriority就失去上下文
最容易被忽略的是：预加载的 href 和最终 <img src>（或 srcset 中实际匹配到的那项）必须字符串完全一致——包括大小写、斜杠、query 参数。差一个字符，缓存就不命中，等于下载两次。
