bfcache

BFCache的意思是“后退前进缓存“(back-forward cache)。

pageshow事件
这个事件在页面显示时触发，无论页面是否来自bfcache。在重新加载的页面中，pageshow会在load事件触发后触发；而对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。

pagehide事件
该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。

persisted属性
pageshow事件和pagehide事件的event对象还包含一个名为persisted的布尔值属性。

  • 对于pageshow事件，如果页面是从bfcache中加载的，则这个属性的值为true；否则，这个属性的值为false。
  • 对于pagehide事件，如果页面在卸载之后被保存在bfcache中，则这个属性的值为true；否则，这个属性的值为false。

不同的浏览器在浏览器会在当前窗口“打开”历史纪录中的前一个页面的表现上并不统一，这和浏览器的实现以及页面本身的设置都有关系。

bfcache失效

  • 页面监听了 unload 或者 beforeunload 事件;
  • 页面设置了 “cache-control: no-store”.
  • 网站使用 HTTPS 同时页面至少满足以下一个条件:
    • “Cache-Control: no-cache”
    • “Pragma: no-cache”
    • 设置请求头 “Expires: 0” 或者 “Expires” 的值为 “Date” 之前的值 (除非 “Cache-Control: max-age=” 也被设置了);
  • 页面在用户前进后退的时候还没有完全加载完或者它有正在进行的网络请求,比如 XMLHttpRequest;
  • 页面正在进行IndexedDB操作;
  • 顶层的页面包含有frame,并且这些frame由于这里列的任何一条原因而不能被缓存;
  • 页面在一个frame内，并且用户在这个frame内跳转到了一个新的网页,这里将被缓存的是新载入的网页

补充：使用MessageChannel可能导致bfcache失效，会让页面中存在无法休眠的 activeDOMObject，见求教下 bfcache 失效的问题

参考

https://developer.mozilla.org/zh-CN/docs/Working_with_BFCache
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
https://webkit.org/blog/427/webkit-page-cache-i-the-basics/
https://blog.csdn.net/seminelee/article/details/52383991