必须使用type="speculationrules"且置于中，json需严格合规：纯对象、双引号、无注释、小写字段；仅一个脚本生效，须用where限定范围，prerender与prefetch不可混用同一url，目标页js会真实执行。
直接在 里加一段 <script type="speculationrules"></script> 就能生效，但写错一行 JSON，浏览器就可能把页脚“隐私政策”和“关于我们”全预渲染一遍，内存暴涨卡死标签页。
必须用 type="speculationrules"，其他写法全无效
浏览器只认这个 MIME 类型，text/json、application/json 或普通 <script></script> 都会被静默忽略——不报错、不警告、也不执行。脚本必须放在 中（放 底部可能漏掉未解析的链接），且一个页面只能有一个，多个时仅最后一个生效。
- JSON 必须纯正：不能有注释、不能有尾逗号、字段名全小写（如
prerender，不是Prerender） - 根对象只能是对象，不能是数组；值里的字符串要用双引号，单引号会解析失败
- 常见错误：
{"prerender": [{"source": "document", "eagerness": "moderate"}]}看似没问题，但若多了一个逗号或用了中文引号，整段规则就失效
eagerness: "moderate" 不配 where 就等于给所有同源链接发“开工令”
单独写 {"prerender": [{"source": "document", "eagerness": "moderate"}]} 表面简洁，实际危险：它会让 Chrome 对当前页所有同源 <a></a> 链接（包括页脚“联系我们”、底部备案号）都启动预渲染进程。低端 Android 设备可能直接卡死，DevTools 里看到的是大量 prerender 类型请求堆积。
- 必须加
where来圈定范围，例如只处理带data-track="next"的链接：{"where": {"selector_matches": "a[data-track='next']"}} - 路径匹配用
href_matches，它支持正则，但必须是完整 URL 匹配（含协议），且注意双反斜杠转义："^https?://example.com/product/\d+$" -
href_matches: "/*"是典型错误，*不是 glob 通配符，而是字面量字符，结果反而匹配首页全部链接
prerender 和 prefetch 别混用同一类页面
prerender 会真实执行目标页 JS、发起 API 请求、触发第三方 SDK；prefetch 只下载 HTML/JS/CSS 到内存缓存，不解析不执行。选错类型，轻则白屏，重则提前创建订单、污染 localStorage。
- 适合
prerender的页面：内容稳定、无副作用、同源、无需强登录校验——比如文章页 → 下一篇、商品详情页 → 同系列推荐 - 适合
prefetch的页面：分页链接、分类页、含表单或权限跳转的页面（如 /login?redirect=xxx） - 可共存于同一段脚本中，浏览器自动分流；但别对同一个 URL 既
prerender又prefetch，没意义，还占内存
source: "list" 要显式写全 URL，且 eagerness 不能省
当你想精准控制几个固定链接（比如首页轮播图、主导航项），用 source: "list" 最稳妥。但它不扫描 DOM，完全依赖你手写的 urls 数组，且所有 URL 必须同源（协议+域名+端口一致）。
-
urls里不能写相对路径如"next.html"，会被忽略；必须是完整路径"/product/123"或绝对 URL"https://yoursite.com/about" -
eagerness字段必须显式写出："eager"、"moderate"或"conservative"；漏写会导致整条规则被浏览器丢弃 -
where对source: "list"无效，所以不用白搭；多条规则按数组顺序匹配，高转化率路径建议放前面
最易被忽略的点：预渲染时目标页 JS 真的会执行，fetch 会发，localStorage 会写——如果你没在目标页用 document.prerendering === false 做埋点延迟或状态隔离，用户还没点就已上报一次无效曝光，或提前初始化了广告 SDK。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
