需通过声明式 json 规则启用预渲染：一、在head中添加type="speculationrules"的script并配置hover触发的prerender规则；二、用link rel="prerender"单页提示；三、fallback至prefetch；四、校验同源、无副作用、非敏感路径；五、通过chrome://net-internals验证状态。
如果您希望在谷歌浏览器中利用 Speculation Rules API 实现网页预渲染以显著缩短页面切换延迟，则需通过声明式 JSON 规则主动告知浏览器哪些链接值得提前渲染。以下是具体实施步骤：
一、配置 speculationsrules 脚本块
该方法通过内联 <script type="speculationrules"> 声明预渲染策略，使 Chrome 在用户悬停链接后按指定急切程度启动后台渲染流程，避免运行时动态注入的不确定性。</script>
1、在 HTML 文档的 区域末尾插入一个 type 为 "speculationrules" 的 script 标签。
2、在该 script 标签内部写入合法 JSON 格式的规则对象，确保根键为 "rules" 且值为数组。
3、在 rules 数组中添加一个对象，设置 "predicate" 为 { "type": "hover" }，表示触发条件为鼠标悬停。
4、在同一对象中设置 "action" 为 "prerender"，并指定 "urls" 字段为包含目标路径字符串的数组，例如 ["/about.html", "/contact.html"]。
5、可选地添加 "eagerness" 字段，取值为 "moderate"（默认悬停 200ms 后启动）或 "eager"（立即启动）。
二、使用 link rel="prerender" 进行单页提示
该方法适用于已知高转化率入口链接，无需 JavaScript 或 JSON 配置，直接在链接所在页面的 head 中声明单个预渲染目标，兼容性要求较低但灵活性受限。
1、定位到需要预渲染的目标页面 URL，例如 "/products.html"。
2、在当前页面的 内添加一行 link 标签：。
3、确保该 link 标签位于所有 CSS 和 JS 引用之后，避免阻塞关键资源加载。
4、验证浏览器是否发起 prerender 请求：打开 Chrome DevTools → Network 面板 → 过滤器输入 "prerender"，悬停对应链接后观察是否有新请求出现。
三、结合 prefetch 回退策略适配多浏览器
该方法在不支持 Speculation Rules API 的浏览器中启用降级机制，通过 link rel="prefetch" 提前获取 HTML，虽不执行 JS 渲染，但仍能减少首字节等待时间，提升非 Chrome 用户体验。
1、检测浏览器是否支持 speculationrules：执行 HTMLScriptElement.supports('speculationrules')，返回 false 时进入降级逻辑。
2、为每个需优化的导航链接创建唯一 href 缓存键，防止重复 prefetch。
3、监听 document 上的 mouseenter 事件，委托至具有 href 属性的 a 标签。
4、事件触发时，动态创建 元素，并将其 href 设为当前链接地址。
5、将该 link 元素 append 到 document.head，使浏览器开始预获取 HTML 文件。
四、限制条件校验与安全规避
该方法聚焦于排除导致预渲染失败的常见配置错误，确保规则生效前满足 Chromium 强制约束，避免因跨域、敏感路径或副作用请求被静默忽略。
1、检查目标 URL 是否与当前页面同源，跨域地址将被 Chrome 直接拒绝 prerender。
2、确认目标页面未包含 POST 表单、fetch() 或 XMLHttpRequest 发起的非 GET 请求，含副作用的脚本会导致预渲染中止。
3、避免对 /login、/checkout、/api 等路径启用 prerender，Chrome 会自动屏蔽含敏感语义的路径。
4、在规则中禁用 "eagerness": "eager" 用于含用户输入字段的页面，防止悬停即触发表单初始化等意外行为。
五、验证预渲染是否成功启用
该方法依赖 Chrome 内置指标与调试工具实时反馈，绕过肉眼观察加载时间的主观误差，直接读取渲染管线状态，确认 prerender 页面是否已就绪并可瞬时切换。
1、在 Chrome 地址栏输入 chrome://net-internals/#prerender，查看当前活跃的 prerender 条目列表。
2、点击目标 URL 对应的 "Dump" 链接，检查输出中是否存在 "status": "Ready" 字段。
3、在页面中右键点击待测试链接，选择“在新标签页中打开”，观察新页面是否在 100ms 内完成首次内容绘制（FCP）。
4、打开 Performance 面板，录制一次导航操作，检查主线程中是否存在 "Prerendered Page Activation" 事件标记。
