link rel="preload" 是 html 解析早期唯一原生触发图片下载的方式，须置于 靠前位置、as="image"、href 与最终 img src 完全一致，且不可与 loading="lazy" 或 display: none 混用。
link rel="preload" 是唯一能在 HTML 解析早期触发图片下载的原生方式，但它不是“加个属性就行”，路径、类型、位置错一个，就等于没写。
必须写在 里，且位置要靠前
浏览器只在 HTML parser 初期识别 link rel="preload"，一旦开始构建 DOM 或遇到 ，后续插入的 <link> 全部被忽略。
- ✅ 正确：紧跟
<meta charset>后，或<title></title>前 - ❌ 错误：放在
<link rel="stylesheet">下方、<script></script>标签之后、内部 - ⚠️ 动态创建（比如
document.createElement('link')）完全无效，JS 插入不触发预加载
as="image" 缺一不可，写错就降级为 fetch
as 不是提示，而是强制指令。它决定请求头、缓存策略、优先级和是否复用图片解码管线。漏写或写成 as="img"、as="picture"，浏览器会把它当普通 fetch 处理，Priority 显示 Low，Initiator 是 (Other)。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 必须写
as="image" - ❌
as="img"、as="picture"、不写as—— 全部静默失效 - ⚠️
fetchpriority="high"只对 Chrome 109+ 有效，旧版忽略无副作用，但不能替代as="image"
href 路径必须与最终 ![]()
完全一致
预加载只是把资源放进缓存，真正渲染时靠 URL 字符串精确匹配复用。大小写、斜杠、query 参数差一点，就会重复下载两次。
- ✅ 推荐用根相对路径：
/assets/hero.webp或绝对 URL：https://cdn.example.com/logo.svg - ❌ 相对路径如
./images/banner.jpg，容易因 HTML 所在目录不同而 404 - ⚠️ 构建工具自动哈希文件名（如
logo.a1b2c3.webp）时，href必须同步更新，硬编码路径必失效 - ⚠️ WebP + fallback 场景下，
href只能指定一种格式（推荐 WebP），且<img>的src或srcset中实际用到的也得是同一份
别和 loading="lazy" 或 display: none 混用
这是最常踩的坑：loading="lazy" 是推迟加载，display: none 可能导致浏览器延迟发起 eager 请求——两者都和预加载目标完全相反。
- ❌ 给首屏
<img>同时加loading="lazy"和<link rel="preload">：逻辑冲突，Chrome 可能直接忽略 preload - ❌ 把
<img>放在display: none容器里指望“悄悄预加载”：部分浏览器会等元素进入渲染流才发请求 - ✅ 非首屏但确定会显示的图（如 Tab 切换后立刻出现的内容），用
<img loading="eager">更合适，不用 JS 也不用 preload
preload 却没生效，问题几乎都出在 href 字符串不匹配，或者以为加了就能“提前显示”——其实它只管下载，不管解码和渲染。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
