确保该网页可以从往返缓存中恢复

背景

往返缓存 (bfcache) 会将相应网页的快照存储在内存中,以供系统在从导航历史记录中恢复该网页时使用。这可以显著加快向网页返回导航的速度,但是,某些浏览器 API(例如卸载监听器)可能会导致 bfcache 失败,从而正常加载网页。

Lighthouse 如何检测 bfcache 失败

独立导航

在独立导航结束时,Lighthouse 将离开,并尝试从导航历史记录中恢复页面,以检测是否正在使用 bfcache。

用户流

运行用户流时,Lighthouse 不会主动测试导航中的 bfcache。这是因为,在每次导航结束时离开和返回页面,并不能反映页面上的大多数用户体验。

不过,您仍然可以测试时间跨度模式下的 bfcache 使用情况,方法是将历史记录导航添加为用户体验历程的一部分。例如:

const flow = await startFlow(page);

// This navigation will not test the bfcache
// because it is part of a user flow.
await flow.navigate('https://example.com');

// This timespan will try to restore the page from the bfcache.
// Problems restoring from the bfcache are surfaced in this report.
await flow.startTimespan();
await page.goto('https://example2.com');
await page.goBack();
await flow.endTimespan();

了解 bfcache 失败

如果该网页出于任何原因无法从 bfcache 恢复,审核将失败。Lighthouse 将列出 bfcache 无法使用的所有原因,以及导致问题的帧。失败原因可能是以下三种类型之一:

  • 可操作:您可以解决这些问题以启用缓存。
  • 待提供支持:Chrome 尚不支持这些功能,因此它们会阻止缓存。不过,Chrome 一旦支持此功能,便会解除这些限制。
  • 不可处理:您无法解决本页中的这些问题。网页控制范围之外的因素会阻止缓存。

Lighthouse 往返缓存审核的结果示例

资源