前言
让我们来看一种情况：一个列表页面中，预期每次网页载入后，onload()事件都会以ajax方式重新取得最新的列表资料，因此点击后退到该页面，用户应该能立即看到最新的列表资料。然后，在一些浏览器中，发现回到上页时不会自动载入更新后的资料，需要刷新才能重新载入。这是因为：
部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache)
什么是bfcache
我们熟悉的红本本《JavaScript高级程序设计》有提及bfcache：
bfcache，即back-forward cache，可称为“往返缓存”，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存不仅保存页面数据，还保存了DOM和JS的状态，实际上是将整个页面都保存在内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发onload事件
pageshow事件
这个事件在页面显示时触发，无论页面是否来自bfcache。在重新加载的页面中，pageshow会在load事件触发后触发；而对于bfcache中的页面，pageshow会在页面状态完全恢复的那一刻触发。
pagehide事件
该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。
persisted属性
pageshow事件和pagehide事件的event对象还包含一个名为persisted的布尔值属性。
- 对于pageshow事件，如果页面是从bfcache中加载的，则这个属性的值为true；否则，这个属性的值为false。
- 对于pagehide事件，如果页面在卸载之后被保存在bfcache中，则这个属性的值为true；否则，这个属性的值为false。
不同的浏览器在浏览器会在当前窗口“打开”历史纪录中的前一个页面的表现上并不统一，这和浏览器的实现以及页面本身的设置都有关系。
测试
测试代码
<!DOCTYPE html>
<html>
<head>
<title>Page Events</title>
<meta charset="utf-8">
<script>
function appendFunc(msg){
var d = new Date();
var li = document.createElement("li");
li.innerHTML = d.toISOString().substr(14, 9) + " " + msg;
document.querySelector("ul").
最低0.47元/天 解锁文章
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
