昨天在用js实现页面刷新之后，测试报BUG，说和原来的刷新页面有些不一样。因为beta上的后台系统是两层：一个菜单栏，一个内嵌的窗口栏。当时页面刷新刷新了当前的标签页，而不是只刷新内嵌的页面。然后我感觉几种js刷新页面的方法可能是有区别的，于是记一下。
js刷新当前页面的方法
方法有很多，我常用到的有两种：history.go(0)、window.location.reload()。在工作的项目中，我先用的是history.go(0)，然后出现了刷新整个标签页的行为。然后换成了window.location.reload()，此时就只刷新内嵌的页面了。本以为这两者的区别在这里，但是从我自己新建的测试看来，根据浏览器的不同，测试的结果也有很大差别。
$("#reload").click(function(){
history.go(0);//只刷新当前window
window.location.reload();//只刷新当前window
top.window.location.reload();//刷新整个标签页
self.location.reload();//只刷新当前window
});
根据以上的代码的测试结果，总结如下:
-
在chorme中，除了top刷新整个标签页，其他的刷新结果，就测试获得的结果来看都是一样的。
-
在firefox中，history.go(0)是会刷新整个标签页的，而reload只会刷新当前页面，不会刷新其父元素。
我在网上看到了一些关于reload()和history.go(0)的说明，说法还是很不一致的。自己再测试一下：
<html>
<head>
<title></title>
<meta charset=UTF-8>
</head>
<body>
<input type="submit" onclick="javascript:window.location.reload(true);" value="reload单击" />
<input type="submit" onclick="javascript:history.go(0);" value="history单击" />
<input type="submit" onclick="javascript:window.location.href=window.location.href;" value="href单击" />
</body>
</html>
经过测试之后，我大致的结论如下：
-
reload()方法接收一个参数，默认为false，直接从缓存里面取。如果为true，则以get的方式从服务器获取最新的页面。测试中，chrome返回的结果都是http状态码为304 Not Modified，也就是取的缓存。但是在firefox中，false返回的是304，而true返回的是200。
-
在chrome中，history.go(0)同样返回304 Not Modified，而在firefox中，history.go(0)返回的是200。
-
在chrome下，href这种方式产生的结果和以上两种不同，是200 OK (from disk cache)和304 Not Modified交替出现，网上给的说法是存在ETag的情况下，两种状态交替出现（不那么准确，测试中存在一直200的情况，也存在随机出现的情况）。200是没有跟服务器确认缓存有效性，而304是确认了缓存有效性。以此看来，上面两种方法都是先访问了服务器再取的缓存，而href这种方式有时会直接取缓存。而在firefox下，则一直都是200，不管是否存在ETag。
总结
在chrome和firefox两种浏览器下测试，得到的结果差别很大。根据目前的测试结果再总结一下：
-
F5刷新返回的HTTP状态码为304。
-
reload()只会刷新当前页，不会刷新其父元素。在chrome下，true or false没有差别，都是304状态。在firefox下，true为200，false为304。
-
在chrome中，history.go(0)只刷新当前页，不刷新其父元素，状态为304。在firefox中，history.go(0)刷新整个标签页，状态为304。
-
在ETag存在的情况下，chrome中，href随机出现200和304两种状态码；在firefox中，只出现200。
参考
200 OK (from cache) 与 304 Not Modified