href_matches采用glob模式而非正则，仅支持和*通配符，不识别^、$、\d或分组；跨域url无效，且where条件仅在source:"document"下生效。

href_matches 要写成正则风格，但不支持完整正则语法

href_matches 看起来像正则，实际是 glob 模式（类似 shell 通配），只认 * 和 **，不支持 ^、$、\d 或分组。比如 "/products/*" 能匹配 /products/123 和 /products/list?sort=price，但 "/products/[0-9]+" 会静默失效。

常见错误是直接粘贴 JS 正则过去，结果规则完全不生效——浏览器既不报错也不加载，DevTools Network 里也看不到任何 prefetch/prerender 请求。

• "href_matches": "/checkout/*" ✅ 安全，覆盖所有结算路径
• "href_matches": "https://example.com/*" ❌ 跨域 URL 不参与 prerender，该条规则对 prerender 无效（prefetch 仍可能工作）
• "href_matches": "/user/*/settings" ✅ 支持多级通配，匹配 /user/abc/settings、/user/123/settings?tab=profile
• "href_matches": "/api/*" ⚠️ 危险，可能误触后端接口，且 prerender 阶段发起的 fetch 会真实执行

where 里用 and/not 组合条件时，顺序和嵌套必须严格

where 支持布尔逻辑，但结构敏感：and 和 not 必须是同级对象，不能嵌套在另一个 not 里，也不能和 href_matches 并列——它只能作为顶层字段出现。

典型用途是排除登录、注销、表单提交等敏感页。写错结构会导致整个规则被忽略，而不是部分失效。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 正确写法：{"and": [{"href_matches": "/article/*"}, {"not": {"href_matches": "*logout*"}}]}
• 错误写法：{"href_matches": "/article/*", "not": {"href_matches": "*logout*"}} → 静默失败
• 错误写法：{"not": {"not": {"href_matches": "*logout*"}}} → 浏览器不识别，跳过该条规则

selector_matches 比 href_matches 更可控，但依赖 DOM 稳定性

用 selector_matches 可以精准绑定到带特定属性的链接，比如 a[data-prerender="true"] 或 nav a。它不看 URL，只看元素是否存在、是否满足选择器，适合动态渲染页面（React/Vue）中手动标记高价值跳转点。

但要注意：Speculation Rules 在 HTML 解析阶段就生效，如果链接是 JS 后续插入的（比如分页组件懒加载后才 append），source: "document" 规则不会捕获它们——此时必须改用 source: "list" 显式声明 URL。

• ✅ 推荐："selector_matches": "a[data-track='next']"，配合业务埋点统一标记
• ⚠️ 风险："selector_matches": "a[href^='/']" 会匹配所有站内链接，若没配 eagerness 或 where 过滤，极易内存溢出
• ❌ 无效："selector_matches": ".js-link" 若对应 class 是 JS 动态添加的，规则启动时 DOM 里还不存在该元素

where 条件不生效？先检查 source 和同源限制

where 只在 source: "document" 下起作用；source: "list" 完全忽略 where，只认 urls 数组。这是最常被忽略的隐性约束。

另外，所有匹配都基于最终解析出的绝对 URL。浏览器会自动补全相对路径（如 <a href="https://www.php.cn/link/9a29c32994158d26c4169dfd81ba440b"></a> → https://site.com/current/https://www.php.cn/link/9a29c32994158d26c4169dfd81ba440b），但 href_matches 写的是 "https://www.php.cn/link/9a29c32994158d26c4169dfd81ba440b" 就永远不匹配——必须写成 "/current/https://www.php.cn/link/9a29c32994158d26c4169dfd81ba440b" 或更宽泛的 "/current/*"。

• 检查点1：确认用了 "source": "document"，不是 "list"
• 检查点2：打开 DevTools → Elements → 找一个目标链接，右键 Copy → Copy link address，拿这个完整 URL 去比对 href_matches 模式
• 检查点3：确保目标链接没有 rel="nofollow" 或 target="_blank" ——Chrome 当前版本会跳过这两类链接的 prerender

真正难的不是写对 where，而是理解它和 eagerness 的耦合关系：moderate + 宽泛匹配 = 高风险，eager + 精准 href_matches = 高收益。漏掉任一环，轻则浪费内存，重则触发未预期的 API 调用或状态变更。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！