这篇文章主要为大家展示了“移动端H5页面返回并刷新页面BFcache的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“移动端H5页面返回并刷新页面BFcache的示例分析”这篇文章吧。
凭借整站使用H5开发的创新体验、定制设计、设计团队积累与透明式的服务过程,符合行业特点，专属顾问根据企业产品，消费群体属性，准确定位；设计师以目标客户为中心，以突出品牌官网特性为宗旨，定制专属网站建设设计方案。
项目中的需求：
点击浏览器中的返回按钮，要让页面重新加载资源。因为这部分的资源每次去加载的内容都不一样，如果返回的时候，还是看到原先的内容，那做这个内容块的意义就很小了；而如果用户看完了这部分内容，再返回来的时候，这个地方换成了新的内容，这样就能体现这部分的价值了。
而对于浏览器来说，大部分浏览器的返回是直接使用缓存的，不会执行任何的javascript代码。原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache)
什么是bfcache？
bfcache，即back-forward cache，可称为“往返缓存”，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存不仅保存页面数据，还保存了DOM和JS的状态，实际上是将整个页面都保存在内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发onload事件
pageshow事件
这个事件在用户浏览网页时触发，pageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， pageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
pagehide事件
该事件会在用户离开网页时触发。离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。pagehide 事件有时可以替代 unload事件，但 unload 事件触发后无法缓存页面。
persisted属性
pageshow事件和pagehide事件的event对象还包含一个名为persisted的布尔值属性。
对于pageshow事件，如果页面是从bfcache中加载的，则这个属性的值为true；否则，这个属性的值为false。
对于pagehide事件，如果页面在卸载之后被保存在bfcache中，则这个属性的值为true；否则，这个属性的值为false。
不同的浏览器在对当前窗口‘打开'历史记录中的前一个页面的表现上并不统一，这和浏览器的实现以及页面本身的设置有关系。
解决方案：
javascript监听pageshow事件阻止页面进入bfcache
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
window.location.reload()
}
})在uc和微信中测试通过，但是在某些安卓手机自带的浏览器中无效。
javascript监听pagehide事件阻止页面进入bfcache
window.addEventListener('pagehide', function (e) {
var dom = document.body;
dom.children.remove();
setTimeout(function () {
dom.appendChild("window.location.reload();<\/script>");
});
}); 设置meta标签，清除页面缓存
