Prerender2.0对HTML结构高度敏感，嵌套超8层、标签未闭合或语义化缺失（如无<main>）将导致静默中止预渲染；<script>须置于<body>内且不嵌套于限制性标签中，并改用prerenderingchange事件触发执行。
Prerender2.0对HTML结构更敏感，嵌套过深直接导致预渲染失败
Chromium M94+ 的 Prerender2.0 采用单 WebContents 多页面模型，会在后台静默加载并构建完整 DOM 树。但它不像传统 SSR 那样宽容——一旦 HTML 嵌套深度超过 8 层，或存在未闭合标签、<table> 内嵌 <div> 等解析歧义结构，Prerender 就会中止该页面的预渲染流程，降级为普通导航。这不是报错，而是静默放弃，你只能在 Chrome DevTools → Application → Prerendering 面板里看到 aborted 状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
document.querySelector('*').dataset.depth或右键节点 →Show DOM properties查嵌套深度，确保首屏关键区域（如<main>内）平均depth <= 6 - 避免在预渲染目标页中使用
<table>布局；若必须用，确保单元格内只含<span>、<p>等轻量标签，禁用<div>和<section> - 运行
npm run build && npx html-validate --config .htmlvalidate.json dist/index.html检查结构合法性，尤其关注no-multiple-empty-lines、no-unclosed-tags类规则
预渲染时 script 标签行为与常规加载完全不同
Prerender2.0 下，<script> 不再是“下载即执行”，而是被延迟到页面真正激活（prerenderingchange 事件触发）后才开始执行。但这个延迟有前提：脚本必须能被正确解析。如果 HTML 结构导致 <script> 被错误包裹（比如写在 <td> 里没闭合），浏览器解析器会自动修正 DOM，把脚本挪到 <body> 底部——而 Prerender 流程只认原始 HTML 中声明的位置，结果就是脚本被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有
<script>必须显式放在<body>内且不嵌套在<table>、<select>、<noscript>等限制性父容器中 - 非关键脚本统一加
defer；关键初始化逻辑（如 hydrate）改用prerenderingchange事件监听：document.addEventListener('prerenderingchange', () => { if (document.prerendering === false) { hydrateApp(); } }); - 禁用动态插入
<script>的逻辑（如document.write、innerHTML += '<script>'），Prerender2.0 完全不支持这类运行时 DOM 改写
语义化标签缺失会让 Prerender 提前终止资源加载
Prerender2.0 会基于 HTML 结构做资源优先级预判。例如，它识别到 <img fetchpriority="high"> 或 <link rel="preload"> 时，会提前发起请求；但如果整个页面连 <main> 都没有，只有 <div id="app">，Prerender 就无法判断首屏边界，进而放弃预加载图片、字体等关键资源，最终渲染效果和普通导航无异。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个预渲染页面必须包含且仅包含一个
<main>，其子节点应覆盖全部首屏内容（LCP 元素必须在其内部） -
<img>必须带fetchpriority="high"（首屏图）或fetchpriority="low"（非首屏），禁用默认值；loading="eager"对首屏图是硬性要求 - 移除所有
data-*自定义属性中含prerender、ssr、hydrate等关键词的字段，Chromium 会将它们误判为干扰信号而跳过该节点的资源推测
最易被忽略的是：Prerender2.0 的结构校验发生在字节流解析阶段，早于任何 JS 执行。这意味着即使你用 React 或 Vue 的 hydrate 逻辑修复了 DOM，也救不回已经放弃的预渲染流程。
