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>
二、精准控制高价值路径
不是所有链接都值得 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`），否则预渲染失败降级为普通导航
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
