`speculationrules` 标记不适用于 Chrome 中的预渲染页面

Question

按照 Chrome 博客 在 Chrome 中预渲染页面以实现即时页面导航中的说明，我尝试在网站上启用预渲染。我在

</body>

之前添加了此片段。

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["/Test/1","/Test/2","/Test/3"]
      }
    ]
  }
</script>

但是，在最新版本的 Chrome 108 上，打开页面时不会预取或预渲染这些有效 URL。我可以在开发工具的“网络”选项卡中确认这一点，并通过点击通常加载时间的页面链接来确认。

在控制台中，

HTMLScriptElement.supports('speculationrules')

返回

true

。

我错过了什么吗？

Answer 1

我可以在开发工具的网络选项卡中确认这一点

由于新的预渲染发生在单独的进程中（实际上就像后台选项卡），任何网络调用都不会显示在当前页面的 DevTools 中。

所以这里有一些需要检查的事情：

1. 使用 DevTools 调试推测规则
2. 确保您在“设置”->“性能”中勾选了“预加载页面”。某些扩展程序（例如 uBlock Origin）可以关闭此设置。
3. Chrome 在已经使用大量内存时不会预渲染。尝试仅使用该选项卡重新启动 Chrome 以排除此问题。
4. 值得确认这是您网站的特定问题还是一般的预渲染问题。查看该文章中链接的 演示 并让我们知道它是否有效
5. 切换选项卡当前会取消任何预渲染。因此，请确保直接从页面启动。
6. URL 参数差异可以防止激活预渲染，因为它实际上不是同一页面。