配了三年性能优化，今天才发现表单提交从来不能预渲染——Chrome 151 用一个字段把这件事彻底修了

用户填完搜索词、按下回车——然后开始等。等 1 秒白屏、等 2 秒还在转。这种体验在 MPA 站上极其常见，因为表单提交后的结果页从来没法预热。

你可能会想：预渲染不是可以提前加载下一页吗？加上不就行了。

不行。原因在于表单提交通知在浏览器内部有一套特殊的状态和检查机制，普通预渲染准备好的是普通导航上下文，两者不匹配，所以表单提交永远无法激活预渲染。

Chrome 151（2026-07-28 稳定版）用 form_submission 字段解决了这个问题。

它是什么

form_submission 是 Speculation Rules API 的一个新字段，专门告诉浏览器：「这个预渲染是为表单提交准备的，激活的时候要走表单提交通道。」

之前的写法只能预渲染链接点击，表单提交场景完全覆盖不到。现在一行配置就补上了这个缺口。

怎么用

<script type="application/speculationrules">
{
  "prerender": [{
    "where": {
      "href_matches": "/search*"
    },
    "form_submission": {
      "action": "/search"
    },
    "eagerness": "moderate"
  }]
}
</script>

action 指定目标 URL 模式，eagerness: moderate 表示用户鼠标悬停 200ms 后开始预渲染。同样支持列表规则：

{
  "prerender": [{
    "urls": ["/search", "/category", "/tag"],
    "form_submission": {}
  }]
}

POST 表单不要预渲染——结算页、个人中心页在预渲染阶段执行了副作用（比如 CSRF token 被消费、库存被锁），到真正激活时已经凉了。

真实数据

• Ray-Ban：移动端 LCP 从 4.69s 降至 2.66s，转化率提升
• Monrif：桌面 LCP 提升 17.9%，用户参与度 +8.9%
• Mintec 三项目实测：INP 从 98-145ms 降至 62-88ms

隐私要注意

W3C TAG 提过：表单数据通常包含用户输入，预渲染阶段在后台运行，理论上可能暴露敏感信息。如果表单有敏感字段，建议等用户明确点击后再提交，不要依赖预渲染提前触发。

怎么验证

Chrome DevTools → Application → Speculative Loads，能看到每条规则的触发状态和预渲染进度。

下一步

1. 列出站点中哪些表单结果页最值得预热（搜索页、分类过滤页）
2. 在测试环境加第一条 form_submission 规则，用 DevTools 确认触发
3. 分析表单是否有敏感字段，有的话排除掉

Chrome 151+ 用户全球约 75%（Can I Use 数据），对 Chromium 系浏览器用户来说，这是搜索类页面零成本的体验提升。