往返缓存 bfcache

Posted 2020-11-07 晨の风

        很多业务中，我们从 a 页面进行操作，进入 b 页面后显示操作结果，当我们直接返回退到 a 页面时，我们需要的是 a 页面能自动刷新数据，但是，a 页面并未发生改变。也就是说，返回后页面为刷新，这就是 往返缓存  Back-Forward Cache(简称bfcache)。

        bfcache，即back-forward cache，可称为“往返缓存”，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存不仅保存页面数据，还保存了DOM和JS的状态，实际上是将整个页面都保存在内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发onload事件。

　　pageshow事件

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

　　

window.addEventListener(‘pageshow‘, function( e ){
　　appendFunc("Pageshow Event");
　　appendFunc("pageshow persisted is :"  + e.persisted);
})

　　以上方法不管用时，也可以暴力一点：

if(window.name != "fresh"){
   location.reload();
   window.name = "fresh";
}else{
   window.name = "";
}