新的软导航源试用

发布时间:2025 年 7 月 31 日

Chrome 将从 Chrome 139 开始针对我们之前一直在实验的 Soft Navigations API 推出新的源试用。通过此源试用,网站可以与真实用户一起在自己的网站上试用该 API,以便进行实地测试并向 Chrome 团队提供反馈。

什么是软导航?

软导航是指 JavaScript 拦截导航(例如,点击链接)并更新现有网页上的内容,而不是通过加载新网页来更新地址栏中的网址(通过历史记录状态来允许软导航的后退和前进)。对于用户而言,这些看起来与常规导航相同,但就浏览器而言,网页仍然是原始网页。

为何需要软导航 API

软导航 API 是一项提议的 API,用于允许基于启发式的检测,以检测单页应用 (SPA) 网站使用的所谓“软导航”。由于软导航不会发生实际的网页导航,这意味着通常在导航时发生的某些操作需要通过 JavaScript 手动管理。借助当前的 API,可以执行某些操作,例如管理导航历史记录。不过,对于这些导航,无法执行其他操作,例如衡量核心网页指标

Soft Navigation API 允许观察软导航。虽然发起软导航的 JavaScript(通常是 JavaScript 框架)知道何时发生导航,但其他 JavaScript 和浏览器本身并不知道。

核心网页指标和 SPA

软导航 API 的主要驱动因素之一是允许衡量 SPA 的核心网页指标。核心网页指标由浏览器(以便在 Chrome 用户体验报告等工具中显示)和实时用户监控 (RUM) JavaScript 库进行衡量。

JavaScript 框架可以衡量核心网页指标的某些方面。尤其是 Interaction to Next Paint (INP)Cumulative Layout Shift (CLS),它们基于可在任意时间范围内测量的原语(分别是 Event Timing APILayout Instability API),以计算 INP 和 CLS 指标。不过,其他指标(例如 Largest Contentful Paint (LCP))仅由浏览器根据网页导航发出,并且在互动时最终确定

软导航 API 如何允许衡量 SPA 的核心网页指标

Soft Navigation API 的首次迭代将软导航启发式方法与 LCP 重置相结合。重置后,可以针对新的有内容绘制重新发出 LCP,从而可以针对软导航衡量此指标。

最新迭代版本采用了不同的方法,将这些概念分离为软导航 API 和新的 Interaction to Contentful Paint 性能条目。interaction-contentful-paint 条目用于衡量互动后的“有内容绘制”。目前,此指标仅针对软导航发出,但如果针对所有互动启用此指标,则可实现 LCP 以外的其他潜在使用场景。

该 API 还扩展了每个 largest-contentful-paintinteraction-contentful-paintevent-timinglayout-shift 性能条目,以包含相应条目所针对的导航的标识符。性能条目会在其衡量的事件之后(通常是在空闲时间)发出。这意味着,在发出性能条目时,网址通常已发生更改。包含入口的导航可让您更轻松地衡量指定网址的核心网页指标,而无需将性能入口时间与软导航入口时间进行匹配。

为什么使用启发式方法?

当发生以下情况时,软导航 API 会将导航视为软导航:

  • 发生基于用户的互动(不包括在没有用户互动的情况下更新网址)
  • … 从而导致 DOM 修改和绘制
  • … 并且发生了网址更新
  • 网址更新,包括历史记录变更。

该 API 采用这种基于启发式的方法,而不是允许 JavaScript 框架“发出”软导航,或基于 Navigation API 构建,因为这样可以确保无论框架如何或开发者如何使用,都能对软导航的构成要素保持一致的理解。

即使没有用户互动或 DOM 更新(我们认为用户会将其视为导航),框架或开发者也可能会更新软导航的网址。它们还可能会在不同的时间更新网址,例如在互动开始时、仅在互动结束时(即互动完成时)或在介于两者之间的任何状态下。

与依赖框架选择不同,将软导航检测功能内置到浏览器中可建立规范的“启发式”方法(根据您在此来源试用中的反馈),从而让我们能够大规模衡量软导航的核心网页指标,并大规模比较此类衡量结果。

框架和开发者也可以忽略 Soft Navigations API 启发法,并使用底层的 Event Timing、Layout Instability 和 Interaction to Contentful Paint API 来根据需要衡量其他性能指标,但我们建议使用启发法来衡量 Core Web Vitals,以便跨网站进行衡量。

需要帮助来测试软导航 API

我们需要帮助来测试 Soft Navigations API,以测试启发式方法是否正确匹配您对何时发生软导航的预期。是否存在以下情况:您认为发生了软导航,但 API 未报告?相反,对于您认为不是软导航的重复导航,API 是否会过度报告?

我们发现,以下情况可能会导致问题:使用 replaceState 更新网址而不是添加历史记录,或者发生非用户发起的导航(例如,因超时而退出登录)。这两种情况都可以解释为不符合启发式方法,Chrome 团队认为不包含这些情况是可以接受的,但我们希望听取 Web 开发者的意见。我们尤其希望了解以下情况:启发式方法似乎已满足,但 API 仍无法识别软导航。

此外,我们还想了解此 API 和新的 Interaction to Contentful Paint 原语是否能满足主要使用场景,即允许衡量 SPA 的 Core Web Vitals。

我们希望该 API 尽可能有用,而在发布之前和网站开始依赖于实现时,更容易实现这一点。因此,我们希望 SPA 开发者以及有兴趣衡量这些网站的 Web 性能的开发者试用此 API,并告知我们其效果如何。

如何测试

您可以使用 Chrome 标志或命令行选项在本地测试该 API。此外,还可以通过源试用在现场进行测试。

如需详细了解该 API 的技术细节,尤其是如何衡量核心网页指标,请参阅我们的文档GitHub 代码库。此外,我们还提供 web-vitals 库的实验性软导航版本

反馈

我们正在积极征求有关此实验的反馈意见,您可以通过以下方式提供反馈:

如果您有疑问,也不必过于担心,我们很乐意在上述任一位置收到您的反馈,并会很乐意在上述任一位置对问题进行分诊,然后将问题重定向到正确的位置。