在 Chrome 中预渲染网页以实现即时网页导航

Barry Pollard

发布时间：2022 年 12 月 2 日；上次更新时间：2026 年 1 月 23 日

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: not supported.
  • Safari: behind a flag.

Source

Chrome 团队已恢复对用户可能访问的未来网页进行完整预渲染。

预渲染简史

过去，Chrome 支持 <link rel="prerender" href="/next-page"> 资源提示，但除了 Chrome 之外，该提示并未得到广泛支持，而且它并不是一个非常富有表现力的 API。

这种使用链接 rel=prerender 提示的旧版预渲染已被弃用，取而代之的是 NoState Prefetch，后者会提取未来网页所需的资源，但不会完全预渲染网页，也不会执行 JavaScript。NoState Prefetch 通过改进资源加载来帮助提高网页性能，但不会像完全预渲染那样实现即时网页加载。

Chrome 团队现已重新在 Chrome 中引入完整预渲染功能。为了避免与现有用法产生冲突，并为将来扩展预渲染功能留出空间，这种新的预渲染机制不会使用 <link rel="prerender"...> 语法，该语法仍用于 NoState Prefetch，但我们计划在未来某个时间点弃用它。

网页是如何预渲染的？

网页可以通过以下四种方式之一进行预渲染，所有这些方式都旨在加快导航速度：

  1. 当您在 Chrome 地址栏（也称为“多功能框”）中输入网址时，如果 Chrome 根据您之前的浏览记录高度确信您会访问该网页，则可能会自动预渲染该网页。
  2. 当您使用书签栏时，Chrome 可能会在您将指针悬停在某个书签按钮上时自动预渲染相应网页。
  3. 当您在 Chrome 地址栏中输入搜索字词时，如果搜索引擎指示 Chrome 这样做，Chrome 可能会自动预渲染搜索结果页面。
  4. 网站可以使用 Speculation Rules API 以程序化方式告知 Chrome 要预渲染哪些网页。此功能取代了 <link rel="prerender"...> 之前的功能，并允许网站根据网页上的推测规则主动预渲染网页。这些内容可以静态地存在于网页上，也可以由 JavaScript 根据网页所有者的意愿动态注入。

在每种情况下，预渲染的行为都如同在不可见的后台标签页中打开了网页，然后通过将前台标签页替换为该预渲染的网页来“激活”该网页。如果网页在完全预渲染之前被激活，则其当前状态为“前台”，并继续加载，这意味着您仍然可以获得良好的开端。

由于预渲染的网页是在隐藏状态下打开的，因此一些会导致侵入性行为（例如提示）的 API 在此状态下不会激活，而是会延迟到网页激活时再激活。在少数尚无法实现此功能的场景中，系统会取消预渲染。Chrome 团队正在努力将预渲染取消原因作为 API 公开，并增强开发者工具的功能，以便更轻松地识别此类边缘情况。

预渲染的影响

预渲染可实现近乎即时的网页加载，如以下视频所示：

预渲染的影响示例。

示例网站已经是一个快速网站，但即使如此，您也可以看到预渲染如何改善用户体验。因此，这也会直接影响网站的Core Web Vitals，实现接近于零的 LCP、减少 CLS（因为任何加载 CLS 都发生在初始视图之前），并改善 INP（因为加载应在用户互动之前完成）。

即使网页在完全加载之前就已激活，预先开始网页加载也应能改善加载体验。如果在预渲染仍在进行时激活链接，预渲染网页将移至主框架并继续加载。

不过，预渲染确实会使用额外的内存和网络带宽。请注意，不要过度预渲染，以免消耗过多的用户资源。仅在网页被访问的可能性较高时进行预渲染。

如需详细了解如何在分析中衡量实际效果影响，请参阅衡量效果部分。

查看 Chrome 的地址栏预测

对于第一种使用情形，您可以在 chrome://predictors 页面中查看 Chrome 对网址的预测：

Chrome 预测器页面经过过滤，可根据输入的文字显示低（灰色）、中（琥珀色）和高（绿色）预测。
Chrome 预测器页面。

绿线表示有足够的置信度来触发预渲染。在此示例中，输入“s”后，Chrome 会给出合理的置信度（琥珀色），但当您输入“sh”后，Chrome 会有足够的置信度来判断您几乎总是会前往 https://sheets.google.com。

此屏幕截图是在相对较新的 Chrome 安装中拍摄的，并滤除了置信度为零的预测，但如果您查看自己的预测器，可能会看到更多条目，并且可能需要更多字符才能达到足够高的置信度。

这些预测器还可为地址栏提供建议选项，您可能已经注意到：

Chrome 地址栏“预输入”功能
地址栏“预先输入”功能。

Chrome 会根据您的输入和选择不断更新其预测器。

  • 如果置信度高于 30%（以琥珀色显示），Chrome 会主动预先连接到相应网域，但不会预渲染网页。
  • 如果置信度高于 50%（以绿色显示），Chrome 将预渲染相应网址。

Speculation Rules API

对于 Speculation Rules API 的预渲染选项，Web 开发者可以在网页上插入 JSON 指令，以告知浏览器要预渲染哪些网址。

网址列表

推测规则可以基于网址列表：

<script type="speculationrules">
{
  "prerender": [{
    "urls": ["next.html", "next2.html"]
  }]
}
</script>

文档规则

推测规则也可以是“文档规则”，使用 where 语法。此规范会根据 href 选择器（基于 网址 模式 API）或 CSS 选择器推测文档中找到的链接：

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/wp-admin"}},
        { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
        { "not": {"selector_matches": ".do-not-prerender"}},
        { "not": {"selector_matches": "[rel~=nofollow]"}}
      ]
    }
  }]
}
</script>

Eagerness

Browser Support

  • Chrome: 121.
  • Edge: 121.