Chrome M94+通过speculationrules声明式启用Prerender2.0，悬停/聚焦时静默预渲染DOM/CSSOM，内存占用降60%；支持路径匹配、排除规则及prefetch兜底，仅Chromium支持。

直接在 HTML `

` 里加一段声明式脚本，就能让 Chrome（M94+）自动对用户可能点击的链接做静默预渲染——这不是黑科技，是 Chromium 官方支持的 Prerender2.0 机制，无需改业务逻辑、不增加构建复杂度，真正“零侵入”。

一、用 speculationrules 启用 Prerender2.0

把这段代码放进页面 `

` 中即可生效：

<script type="speculationrules">{"prerender":[{"source":"document","eagerness":"moderate"}]}</script>

浏览器会自动识别当前页所有 `` 链接，在用户悬停（hover）或聚焦（focus）时，后台启动轻量级预渲染。整个过程完全静默：不触发 JS 执行、不加载图片、不发分析请求，只构建 DOM/CSSOM 并完成首帧渲染，内存占用比旧版低 60% 以上（基于 MPArch 单 WebContents 架构）。

立即学习“前端免费学习笔记（深入）”；

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

二、精准控制高价值路径

不是所有链接都值得 prerender。可按需细化规则，比如只对结账、详情页、下一篇等转化路径启用激进预渲染：

• 匹配 `/checkout` 路径，且立即执行：
  {"prerender":[{"source":"document","where":{"href_matches":"/checkout"},"eagerness":"eager"}]}
• 排除资源类链接（避免浪费）：
  通过 `href_matches` 排除 `.pdf`, `/api/`, `#` 锚点等
• 同一页面多个规则可共存，按顺序匹配，首个命中即生效

三、搭配 prefetch 做兜底保障

Prerender2.0 依赖用户交互信号，首次访问无 hover 时无法触发。这时用 `prefetch` 补位：

<script type="speculationrules">{"prefetch":[{"source":"document","eagerness":"moderate"}]}</script>

它会在空闲时提前下载目标页面的 HTML、关键 JS/CSS，虽不渲染，但大幅缩短后续加载耗时。两者组合，覆盖“有交互”和“无交互”两类场景。

四、注意事项与兼容性

• 仅 Chromium 内核（Chrome、Edge、新版 Opera 等）支持，Safari 和 Firefox 暂未跟进；但 fallback 到 prefetch 后仍可获收益
• 预渲染页面不会执行 `window.onload`、`DOMContentLoaded` 或任何定时器，JS 在真正导航后才激活（即“水合”阶段）
• 避免在预渲染页中调用 `navigator.sendBeacon`、`fetch` 或修改 localStorage——这些操作会被静默丢弃
• 服务端需支持同源策略与正确 Content-Type（`text/html`），否则预渲染失败降级为普通导航