怎么在HTML中通过Speculation Rules的prerender规则配置预渲染的URL列表-html教程-PHP中文网

source: "list" 是最可控的预渲染方式，需显式指定同源url列表和eagerness值，仅chrome/edge 94+支持，firefox/safari不识别；where条件对其无效，多规则自动合并但内存占用高。

怎么在html中通过speculation rules的prerender规则配置预渲染的url列表

用 `source: "list"` 显式声明 URL 列表

直接写死 URL 是最可控的方式，适合跳转路径固定、数量不多的场景（比如首页轮播图链接、固定导航栏入口）。source: "list" 表示你完全接管预渲染目标，浏览器不会自动扫描页面中的 <a></a> 标签。

必须提供 urls 字段，且所有 URL 必须同源（协议+域名+端口一致），否则规则静默失效：

urls 里的值是完整路径或绝对 URL，不能是相对路径如 "next.html"（会被忽略）
跨域 URL 如 "https://api.example.com" 不会触发 prerender，也不报错，只跳过
Chrome 94+ 支持，Edge 94+ 同步支持；Firefox 和 Safari 当前完全不识别 type="speculationrules"

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/product/123", "/about", "https://yoursite.com/contact"]
    }
  ]
}
</script>

`eagerness` 必须显式指定，不能依赖默认值

即使只有一条规则，eagerness 也必须明确写出："eager"、"moderate" 或 "conservative"。漏写会导致整条 prerender 规则被浏览器忽略——不是降级，是彻底不生效。

三档行为差异直接影响资源消耗和时机：

"eager"：链接进入视口即启动，适合高置信度路径（如分页“下一页”按钮），但可能浪费资源
"moderate"：用户悬停或键盘聚焦后约 200ms 启动，平衡体验与开销，推荐作为起点
"conservative"：仅在鼠标按下（mousedown）瞬间触发，几乎等同于点击前最后一帧，风险最低

注意："eager" 对含副作用的页面（如 /checkout）极危险，可能提前创建订单、触发埋点、污染 localStorage。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

避免 `where` 与 `source: "list"` 混用

where 条件（如 href_matches、and、not）只对 source: "document" 有效。若你在 source: "list" 规则里加了 where，整个规则会被浏览器丢弃，控制台无提示。

想过滤列表？只能靠你自己生成干净的 urls 数组。例如，排除测试环境链接：

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/product/123", "/about"],
      "eagerness": "moderate"
      // ❌ 删除这一行： "where": { "not": { "href_matches": "localhost" } }
    }
  ]
}
</script>

同页面多个 `<script type="speculationrules"></script>` 会合并，但顺序不保证

你可以把不同用途的规则拆开放，比如一个放 prefetch，一个放 prerender，浏览器会自动合并处理。但不要依赖执行顺序——prerender 规则不会因为写在后面就覆盖前面的同源规则。

真正容易被忽略的是内存压力：每个 prerender 页面都占用独立内存（MPArch 架构下仍需额外 page 实例）。在低端 Android 设备上，同时激活 3 个以上 eager 预渲染页，可能触发 Chrome 主动终止进程，导致白屏或崩溃。上线前务必用 chrome://discards 观察实际预渲染页数与内存占用。