通过配置预判用户行为，按url模式、css选择器及逻辑条件精准匹配高转化路径，分层使用prefetch与prerender，并注意登录态透传、埋点延迟及同源限制。
直接在 HTML 的 里加一段 <script type="speculationrules"></script>，就能让浏览器“预判”用户下一步动作。关键不在代码多寡，而在规则是否贴合真实路径和用户行为。
用 source + where 精准圈定目标页面
别一股脑预渲染全站链接——浪费资源还可能触发副作用。优先覆盖高转化路径，比如商品页跳结算、文章页跳评论区。
-
按 URL 模式匹配：用
"href_matches": "/checkout/*"锁定结算相关路径，避免误触登录或注销页 -
组合条件过滤：通过
"and"和"not"排除敏感操作，例如{"not": {"href_matches": "*logout*"} } -
支持 CSS 选择器：可写
"href_matches": "a[data-track='next']"，只对带特定属性的链接生效
按场景选对 eagerness 级别
激进度不是越高越好，要匹配用户意图强度和页面复杂度。
- conservative：鼠标按下瞬间才启动，适合支付确认页等关键操作，防误触发
- moderate（默认推荐）：悬停或聚焦超 200ms 后启动，平衡响应与资源消耗，适合大多数内部导航
- eager：链接进入视口即开始，适合首屏强引导按钮（如“立即试用”），但慎用于含大量 JS 的页面
prefetch 和 prerender 分层配合
低成本预取打底，高价值路径再叠加预渲染，既保兼容又控风险。
- 先全局启用
prefetch：浏览器只下载 HTML，不执行 JS，适合分页、分类页等轻量跳转 - 再对核心路径单独加
prerender：比如从产品详情页到下单页，完整渲染+执行逻辑，实现点击即显 - 两者可共存于同一段 script 中，浏览器自动按规则分流处理
避开常见陷阱与安全限制
预渲染会真实执行目标页 JS，没处理好就容易出问题。
- 登录态必须透传：目标页若依赖用户身份，需确保 Cookie 或 Token 在预渲染时可用，否则白屏或重定向失败
- 埋点和上报延迟到激活时刻：用
document.prerendering === false或监听prerenderingchange事件来判断是否真正被用户打开 - 跨域页面无法预渲染：Speculation Rules 只支持同源 URL，第三方域名需靠
dns-prefetch或preconnect提前握手
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
