预扫描器仅浅层扫描首层html字节流，不解析js、不递归嵌套、不识别条件渲染内容；关键资源须置于语义标签内且dom深度≤6层，否则降级为medium优先级或被跳过。
预扫描器根本看不到你藏在深层嵌套里的资源
浏览器的预加载扫描器（Preload Scanner）只做一次快速、浅层的 HTML 字符流扫描，它不构建完整 DOM，也不执行 JS，更不会递归展开 <template></template> 或 <noscript></noscript>。如果你把关键图片、字体或 CSS 写在六层 <div> 嵌套里，或者塞进 <code><details></details>、<dialog></dialog>、<slot></slot> 这类惰性容器中，预扫描器大概率直接跳过——它连标签名都来不及解析到那么深。
常见错误现象包括：首屏大图始终显示为 Medium 优先级、LCP 候选元素迟迟不发起请求、link rel="preload" 提前声明了字体却仍 FOUC。
- DOM 树深度超过 6 层时，Chromium 的预扫描器会主动截断扫描，不再继续读取子节点
-
<picture></picture>内部的<source></source>会被识别，但若整个<picture></picture>被包裹在<div class="lazy-load-wrapper"> 中，且该 wrapper 没有显式 <code>src或loading="eager"，预扫描器就当它不存在 - 服务端渲染（SSR）输出中若关键资源被 JS 动态注入（如通过
innerHTML或框架的 hydration 后挂载），预扫描器完全无法捕获——它只看初始 HTML 字节流 -
fetchpriority="high"只对<img>和<iframe></iframe>生效，且仅 Chromium 119+ 支持；Safari 17.2+ 仅部分识别<img>，Firefox 完全忽略 -
link rel="preload"必须带as属性（如as="style"、as="font"），否则浏览器无法判断资源类型，降级为普通<link>处理 - 不要在
<style></style>块里用@import加载 CSS——预扫描器不解析 CSS 内容，@import是 CSSOM 阶段才触发的串行阻塞行为 -
<main></main>必须唯一且直接包裹首屏关键内容，不能被<div class="container"> 包裹——那层 <code><div> 就是干扰项<li> <code><picture></picture>+<source media="(min-width: 768px)"></source>中的资源，只有当该<picture></picture>出现在视口上方、且未被条件渲染包裹时，才会被预扫描器按媒体查询提前推测加载 - 避免用
<span></span>或<em></em>包裹图片链接——预扫描器对非块级、非语义容器内的资源信任度极低 - 服务端模板中避免在关键资源前后插入多行注释；单行
<!-- img: hero -->影响较小，但跨行注释会强制重置扫描器状态机 - PHP/Node.js 模板中混写的
<?php if ($is_mobile): ?><img src="m-hero.jpg"><?php endif; ?>，预扫描器看到的是不完整的标签片段，直接跳过 - JSX 中的三元表达式
{isHero && <img src="hero.jpg">}在 SSR 输出中为空字符串，等于资源根本没出现在初始 HTML 里
fetchpriority 和 preload 的信号必须在首层 HTML 中显式声明
fetchpriority 不是运行时 API，它只在 HTML 解析阶段被读取一次；link rel="preload" 也必须出现在 或 开头附近，才能被预扫描器及时拾取。一旦被包裹进组件模板、JSX 表达式或条件注释中，信号就失效了。
典型失效场景：Next.js 的 <image></image> 组件默认加 fetchpriority="high"，但如果它渲染在 {isLoaded && <image ...>}</image> 这样的条件块里，服务端 HTML 中根本没这个标签，预扫描器自然无从响应。
语义化标签不是为了 SEO，而是为了让预扫描器“认得清”
预扫描器内部有一套轻量级的标签白名单和上下文感知逻辑：<main></main>、<article></article>、<section></section> 这些语义标签本身会提升其子元素中资源的探测可信度；而连续多个 <div> 嵌套，会被当作“结构噪声”快速滑过。<p>实测发现：同一张首屏图，放在 <code><main><img src="hero.jpg"></main> 中，Chrome Network 面板显示 Priority 为 Highest；而放在 <div><div><div><img src="hero.jpg"></div></div></div> 中，Priority 常为 Medium，即使加了 fetchpriority="high" 也无效。
HTML 注释和条件代码会切断预扫描器的字节流连续性
预扫描器本质是一个基于字符状态机的流式解析器，它依赖 HTML 标签的开闭结构来维持上下文。一旦遇到 <!--、<script>（无 defer）、<style> 或服务器端模板语法（如 {{ if }}），它就会暂停或重置扫描状态——这不是 bug，是设计使然。
最容易被忽略的是 SSR 模板中的注释：比如 <!-- Hero section start --><img src="hero.jpg">，Chromium 会把注释后的内容当作新上下文重新开始扫描，导致 img 标签失去与前面 <main></main> 的结构关联，优先级信号弱化。
预扫描器不“理解”你的业务逻辑，它只相信字节流里干净、扁平、语义明确的那一小段 HTML。所有封装、抽象、条件、延迟，只要没落在首层解析路径上，就等于不存在。
