前言
让我们来看一种情况:一个列表页面中,预期每次网页载入后,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").