浏览器往返缓存--back-forward cache(bfcache)

浏览器往返缓存--back-forward cache(bfcache)

什么是 bfcache ？
  bfcache，即 back-forward cache，可称为往返缓存，可以在用户使用浏览器的 后退 和 前进 按钮时加快页面的转换速度。这个缓存不仅保存页面数据，还保存了 DOM 和 JS 的状态，实际上是将整个页面都保存在内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发 onload事件。这是 HTML5 世代浏览器新增的特性之一。
这就产生了一个问题，如果希望用户每次打开这个页面的时候都能够获取到最新的资源，因为 bfcache 的存在，不做特殊的处理这个效果就无法达到。

解决方案

1. 监听 pageshow 事件,若页面是来自 bfcache，则对页面进行刷新:

window.addEventListener('pageshow', function (e) {
if (e.persisted) {
window.location.reload()
}
})

2. 监听 pagehide 事件阻止页面进入 bfcache:

window.addEventListener('pagehide', function (e) {
 var dom = document.body;
 dom.children.remove();
 setTimeout(function () {
  dom.appendChild("<script type='text/javascript'>window.location.reload();<\/script>");
 });
});

pageshow 事件
  pageshow 事件在页面呈现的时候触发, 类似于 onload 事件，但是 onload 事件是在文档加载完毕的时候触发，如果页面是从浏览器缓存中读取时不会触发； pageshow 事件则是在每次加载页面时都触发。
pagehide 事件
  该事件会在用户离开页面时触发。离开页面有多种方式。如点击一个跳转链接，刷新页面，提交表单，关闭浏览器等。pagehide 事件与 unload 事件 unload类似，但是如果离开页面时页面进入了缓存则不会触发 unload 事件, 同理，unload 事件触发后无法缓存页面。

persisted 属性
   pageshow 事件和 pagehide 事件的 event 对象还包含一个名为 persisted 的布尔值属性。对于 pageshow 事件，如果页面是从 bfcache 中加载的，则这个属性的值为true；否则，这个属性的值为false。对于 pagehide 事件，退出页面之后，如果页面被保存在 bfcache 中，则这个属性的值为true；否则，这个属性的值为false。

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

3. 设置 meta 标签，清除页面缓存:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

  Cache-Control 指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control 并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括 no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括 public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下

• Public: 指示响应可被任何缓存区缓存;
• Private: 指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
• no-cache: 指示请求或响应消息不能缓存
• no-store: 用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
• max-age: 指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
• min-fresh: 指示客户机可以接收响应时间小于当前时间加上指定时间的响应
• max-stale: 指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。