深入了解各种浏览器刷新规则

刷新电脑浏览器大约有四种方法：

1.单击标签a的网址输入或超链接。

2.F5刷新/ctrl R刷新/按钮刷新

3.ctrl F5刷新/ctrl shift R刷新

4.向后刷新

刷新WISE浏览器一般有三种方式：

1.单击标签a的网址输入或超链接。

2.按钮刷新

3.向后刷新

它们不一样，不同浏览器下的效果也不一样。以一个带有iframe的测试页面为例。我们测试的前提是允许页面缓存。我们一个一个来说吧：

个人电脑浏览器

1.单击标签a的网址输入或超链接。

如果你曾经访问过这个网站，刷新方法是直接从缓存中提取数据，请求不到达服务器，前提是网站设置了有效的缓存。

以上是chrome浏览器下的html页面的请求，请求参数携带有If-None-Match(有些情况下还可能有If-Modified-before参数)，服务器返回304，表示请求访问了服务器，验证了缓存。

if-Modified-from:如果在指定时间后修改了请求的部分，则请求成功，如果没有修改，则返回304代码，对应于响应头Last-Modified

If-None-Match:如果内容没有变化，则返回304码，参数为之前服务器发送的Etag，与服务器响应的Etag进行比较，确定是否变化，对应响应头Etag

再次查看iframe中的请求

首先，iframe中src属性中的请求本身不会干扰。

您可以看到iframe中的请求也像外部请求一样带有If-None-Match参数。

看图片资源的要求，我们提前给图片设置了max-age=26280003360

可以看到图片的请求头这次没有If-None-Match参数，而是携带了cache-Control:max-age=0，状态码是来自Cache的200，表示这个请求不访问服务器，直接是Cache返回的响应。

事实证明，当有一个本地缓存，但你还没有设置它的过期日期或者已经过期时，Enter的刷新方式会主动访问服务器，判断缓存是否需要更新。如果设置了到期日期，但该日期尚未到期，则此刷新方法将直接从缓存中请求资源。

以上是火狐下的firebug。可以看到，html页面请求返回304，请求头携带If-None-Match参数，与chrome相同。iframe中的请求和chrome没有什么不同，因为图片是直接从缓存中加载的，Firefox不会直接显示。

“摘要”:点击url输入或标签的超链接。chrome和Firefox表现相同，请求仍在有效期内的缓存资源将直接从缓存中返回；否则将取If-None-Match/If-None-Match参数访问服务器，判断缓存是否需要更新。

2.F5刷新/ctrl+R刷新

首先看看chrome。在chrome下，这次所有资源都是一致的，包括iframe中的请求和前面提到的设置了max-age的图片资源。

上图是html文件的请求。

请求头有更多的缓存控制：最大年龄=0。

服务器会根据Etag或者Last-Modified判断缓存是否需要更新。如果它不需要被更新，它将返回304以告诉浏览器它的高速缓存仍然可用，并且

更新缓存，如果需要更新，返回最新数据和新的Etag/Last-Modified，并更新浏览器缓存。

然后看火狐，

Firefox和chrome对html资源和图片资源的请求具有相同的效果，但是iframe中的资源请求有些不同。与chrome相比，它缺少cache-control: max-age=0的参数。

3.ctrl+F5刷新

火狐和chrome的所有请求都是一样的，所以看看chrome就知道了。

在模式2中，刷新请求没有如果修改自和如果不匹配参数，缓存控制的值变为：无缓存，并且添加了Pragma:无缓存。

最后两个参数具有相同的含义，但是兼容的http版本不同。

无缓存使访问服务器并验证它的请求成为强制性的。但是，由于这次没有If-Modified-from和If-None-Match参数，服务器无法验证，所以服务器直接返回数据，新的Last-Modified和Etag，状态代码为200OK

4.向后刷新

向后刷新主要是指那些页面被强制不缓存的网站。chrome符合这里的标准。当从一个当前页面跳转到另一个页面然后返回时，页面上的资源都是直接请求的缓存：

上图是在chrome浏览器下做的测试。

关于撤退，火狐有不同的做法：

如上图所示，你会发现一个新名词：BFCache

全称是back-forward cache，即“往返缓存”，以提高用户使用浏览器的“后退”和“前进”按钮时的页面转换速度。

这个缓存不仅存储页面数据，还保存了DOM和JavaScript的状态。事实上，整个页面都保存在内存中。也就是说，“向后”不仅意味着html/JS/css/interface等静态和动态资源不会被重新请求，甚至JS也不会被重新执行。

图中并不全是表单BFCache，因为我在测试页面中添加了一个iframe，结果发现iframe不会被Firefox的“往返机制”缓存，在url输入刷新中仍然遵循请求模式。

MDN中也明确指出了这一点：

如果页面位于bfcache中，再次打开页面不会触发加载事件。

虽然整个页面的状态都保存在内存中，如果没有触发load事件应该不会造成什么问题，但是为了更形象地说明bfcache的行为，Firefox还是提供了一些新的事件。

页面显示

第一个事件是pageshow，它在显示页面时触发，不管页面是否来自bfcache。在重载页面中，页面显示将在加载事件触发后触发；对于bfcache中的页面，pageshow将在页面状态完全恢复时触发。还要注意，虽然这个事件的目标是document，但是它的事件处理程序必须添加到window中。

除了通常的属性之外，pageshow事件的事件对象还包含一个名为persisted的布尔属性。如果页面中存在bfcache，则该属性的值为true；否则，该属性的值为false。

您可以根据持久化来判断pageshow事件是否由bfcache中的页面触发。

页面隐藏

pageshow事件对应于pagehide事件，该事件在浏览器卸载页面时和卸载事件之前触发。与pageshow事件一样，pagehide在文档上方被触发，但其事件处理程序必须添加到Windows对象中。此事件的事件对象也包含持久属性

摘要

好了，这就是本文的全部内容。稍后我们将更新wise浏览器的详细介绍。如果您感兴趣，请继续关注我们。