页面缓存问题

我们在做前端缓存的时候，都会想办法把我们的代码文件给缓存起来，提供我们页面的加载速度，同时也降低了我们的宽带压力。

那如果我们的HTML也被缓存了呢？对于那些长期不更新的页面没什么问题，但是我们的定期更新的功能页，一旦页面被缓存，那拉取的文件也必将是老文件。我在做客户端内嵌项目时，就遇到页面被缓存的情况。

判断页面是否从缓存读取

在HTML5中有一个PageTransitionEvent接口，它会在一条历史记录被执行的时候触发pageshow事件。也就是说类似于我们点击前进/后退按钮的操作时，也会在onload事件触发后页面初始化时触发。

那我们在页面中加入监听代码：

window.onpageshow = function(event) {
  console.log(event)
}

刷新页面我们可以看到如下输出：

我们只需要关心persisted这个字段，值为true时，表示页面是从缓存中读取的，对应的false这表示这是从服务器端拉取的。

强制刷新页面

既然我们已经判断出页面是从缓存中读取的，那我们如何自动强制刷新呢？

其实我们只要用到我们最常用的方法window.location.reload方法就可以了。reload方法是有一个参数:forcedReload，也就是说：

window.location.reload(true)

当我们传入true这个参数时，将强制浏览器从服务器获取当前页面的资源而不是从缓存读取。
PS： 这只是保证页面是从服务器拉取，但是页面引用的资源可能还是从缓存读取。
PPS：当执行这段语句的脚本文件和location对象所在页面域不同的话，页面会抛出异常。