预扫描器仅线性扫描首层html，遇阻塞脚本或dom深度超6层即停止，不执行js、不识别条件渲染与惰性容器，且只认合法src属性；关键图片须服务端直出、位置靠前、带有效src及fetchpriority="high"。
关键图片在首屏没被预扫描器发现，不是代码写错了，而是它根本没“看见”——预扫描器只扫首层 HTML 字节流，且一遇到阻塞脚本或深层嵌套就停。
预扫描器为什么压根没扫到你的 <img>
预扫描器不执行 JS、不递归嵌套、不识别条件渲染，只对服务端直出的初始 HTML 做一次线性扫描。一旦你把 <img> 放进 JS 控制的结构里，它就彻底隐身。
-
<img>在{isLoaded && <img src="hero.jpg">}中 → SSR 输出无该标签，预扫描器无从读取 -
<img>套在六层<div> 里（如 <code><div><div><div><div><div><div><img src="..."></div></div></div></div></div></div>）→ Chromium 在第 6 层截断，子节点全跳过 -
<img>包在<details></details>、<dialog></dialog>或自定义<slot></slot>中 → 这些是惰性容器，预扫描器默认忽略 - 用了
<picture></picture>但外层被<div class="lazy-wrapper"> 包裹，且该 <code><div> 没 <code>src或loading="eager"→ 预扫描器连<picture></picture>标签名都未解析到src属性缺失或无效导致预加载直接失效预扫描器只认
src属性，对srcset、data-src、模板变量完全无视。哪怕srcset写得再全，只要src是空、缺失或非法值，这张图就不会进预加载队列。-
<img srcset="a-400.jpg 400w, a-800.jpg 800w">→ 预扫描器跳过，不发起任何请求 -
<img src="">或<img src="undefined">→ 浏览器尝试加载当前页面 URL，造成意外重载或 404 -
<img src="./hero.jpg">在 file:// 协议下可能失败 → 预扫描器发请求但被浏览器拦截，Network 面板显示net::ERR_FILE_NOT_FOUND - 正确做法：首屏图必须带合法
src，哪怕只是src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="（1px 透明 GIF）
fetchpriority和preload信号被包裹或位置错误fetchpriority="high"不是运行时 API，只在 HTML 解析阶段读取一次；link rel="preload"也必须出现在或开头附近，否则预扫描器扫不到。-
<img fetchpriority="high" src="hero.jpg">放在<div id="app"> 内，而该 <code><div> 是 Vue/React 的挂载点 → 若 SSR 未直出，信号丢失 <li> <code><link rel="preload" as="image" href="hero.jpg">写在<meta name="viewport">下面十行 → 可能被阻塞脚本截断，或因离太远被忽略 -
<link rel="preload" href="font.woff2">缺as属性 → 浏览器无法判断资源类型，降级为普通<link>，不参与预加载 - 阻塞脚本在
最前面：<script src="vendor.js"></script>→ 预扫描器扫完这行立即终止，后面所有preload和img全漏掉 - 用 VS Code “Open with Live Server” 或
python3 -m http.server 8000启本地 HTTP 服务，确保协议为http:// - 检查 Network 面板中图片请求的
Initiator列：若显示Preload Scanner，说明被识别；若为空或Parser，说明未触发预加载 - 服务端返回图片时，
Content-Type必须正确（如image/jpeg），否则部分浏览器拒绝解析为图像资源 - CDN 缓存了 404 响应（比如旧路径被缓存），会导致预扫描器反复请求失败 URL，后续即使修复路径也需清缓存
开发环境协议与服务器配置引发的隐性失效
双击打开 HTML 走
file://协议，现代浏览器会拦截所有资源请求；而某些 CDN 或 Nginx 配置不当，会让预扫描器发出的请求返回 404 或非预期响应，表面看是路径错，实则是协议或服务端限制。真正难处理的不是“怎么让预扫描器看到”，而是“它没看到时你根本不知道”——没有报错、没有警告，只有 LCP 延迟、字体 FOUC、首屏图加载慢这些结果。务必在初始 HTML 中直出关键资源，且确保它们物理位置靠前、DOM 深度 ≤6、不依赖 JS 注入或条件渲染。
-
