BFCache解释 | TinyShare前端技术分享

BFCache解释

你有没有尝试过按下浏览器的返回按钮，然后注意到前一个页面加载速度有多快？这就是BFCache在起作用。

什么是BFCache？

BFCache代表着“后退/前进缓存”，是一种机制，允许浏览器在内存中保留一个完全渲染的页面快照。

这意味着，当向后或向前导航时，网页几乎立即被呈现，几乎没有加载时间。

没有BFCache，浏览器将不得不从头开始加载整个网页，因为它将不得不再次连接到服务器，重新下载所有静态资产并重新执行所有脚本。

相反，由于有了BFCache，转换非常平滑。

BFCache会对整个网页进行快照并将其存储在内存中。这时你可能会问自己：我的JavaScript代码的执行会发生什么？

这是一个非常好的问题，因为BFCache的工作方式是将整个JavaScript堆存储在内存中，并暂停正在进行的代码执行。这意味着使用setInterval或setTimeout安排运行的代码将在从BFCache提供页面时恢复，就好像什么都没有发生一样。未解决的Promise也是如此。

当处理indexeddb事务时，情况可能会变得有些棘手：

每当事务正在进行时，用户离开页面，浏览器将不会将页面缓存在BFCache中，除非您确保用户离开前关闭连接。

总的来说，浏览器通常会支持BFCache的某种形式，无论是在移动设备还是桌面设备上。

Chrome的使用数据显示，桌面设备上有10次导航中有1次是返回或前进操作，而移动设备上有5次导航中有1次是返回或前进操作。这些数字是巨大的，因此BFCache确实有潜力节省大量时间。

到目前为止，好处应该是非常明显的：用户在返回您的网站时获得更快、更流畅的体验。

然而，作为开发人员，我们需要注意一些考虑因素，因为BFCache经常是引起沮丧的根源。了解从BFCache提供页面的页面生命周期事件至关重要。

当页面从BFCache加载时，页面load事件不会被触发。相反，我们必须监听pageshow事件，并且我们可以检查event.persisted属性，以查看页面是否是从BFCache中恢复的。这对于检测数据是否过时可能会很方便，我们可以通过进行API调用来更新数据，例如。

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    // 页面是从bfcache中恢复的
  }
});

一些操作，如监听unload事件，将阻止页面进入BFCache，因此，应始终监听pagehide事件，并避免添加unload事件侦听器。unload事件是一个较旧的API，当前被认为是遗留API。

避免始终监听unload事件，这个API被认为是遗留API

如果您的web服务器发送了一个Cache-control: no-store头部，例如Reddit，浏览器会被指示跳过BFCache。这种行为会随着时间的推移而改变，因为从技术上讲，这个头部应该只用于HTTP缓存，而BFCache不是HTTP缓存。

关于BFCache的更多信息

为了保证用户体验良好，经常测试BFCache非常重要。

您可以通过打开Chrome开发者工具并导航到“应用程序”选项卡，然后单击“后退/前进缓存”来轻松测试BFCache。在此页面上，您可以按下大的“测试后退/前进缓存”按钮，Chrome将自动导航到您的网页并显示页面是否进入缓存。

Chrome开发者工具 - BFCache

如果BFCache失败，您将收到一个精确的描述，告诉您具体出了什么问题。如果成功，您将看到一个绿色的勾号，表示页面已成功缓存。

有关BFCache的更多信息，请参阅下方描述中的链接。