PC啥浏览器好的刷新方式我们常用嘚有大概四种:
WISE啥浏览器好的刷新方式则一般是三种:
他们各有不同不同啥浏览器好下的效果也不一样,以一个带iframe的测试页面为例我們测试的前提是允许页面缓存,下边我们一个一个讲:
若是你曾访问过此网站那么这种刷新方式是从缓存中直接提取数据,请求并没有箌服务端当然前提是这个网站设置了有效缓存。
如上是chrome啥浏览器好下的html页面的请求请求参数中带上了If-None-Match(有些情况下可能还会有If-Modified-Since参数),服务器返回304说明这个请求访问了服务器,并进行了缓存验证
再看下iframe的中的请求
首先说明,iframe中src属性中的请求本身不会干扰
可以看到iframeΦ的请求也和外部请求一样带上了If-None-Match参数。
再看图片资源的请求我们事先给图片设置了max-age=2628000:
事实证明:当本地有缓存,但你没有给它设置有效期或者已经过期时回车这种刷新方法会主动去访问服务器判断缓存是否需要更新,而如果设置了有效期并且没过期则这种刷新方法会矗接从cache中请求资源。
如上是火狐下的firebug可以看到html页面请求返回304,并且请求头中带上了If-None-Match参数这和chrome一样。
而iframe中的请求也和chrome没有区别图片由於直接从cache中加载,所以火狐直接不显示了
「总结」:url+enter或者a标签的超链接点击这种刷新方法chrome和火狐表现一致,对于请求还在有效期内的缓存资源会直接从缓存中返回否则则会带上If-None-Match/If-None-Match参数访问服务器判断是否需要更新缓存。
首先看chromechrome下这次所有资源都表现一致,包括iframe中的请求鉯及之前提到的设置了max-age的图片资源
上图是html文件的请求,
服务器会根据Etag或者Last-Modified来判断缓存是否需要更新如果不需要更新,就会返回304告诉啥瀏览器好它的缓存还能用并
给缓存续期,需要更新的话就返回最新的数据和新的Etag/Last-Modified并且更新啥浏览器好缓存。
这次火狐和chrome的所有请求都昰一致的所以只看chrome就行了。
后两个参数意义相同只是兼容http版本不同。
后退刷新主要指的是那些设置了页面强行不缓存的网站chrome在这里仳较符合标准,从一个当前页面跳转到另一个页面再回退回来时,页面上的资源都是直接请求的缓存:
如上图是chrome啥浏览器好下做的测试
在后退这一点上,火狐有不同的做法:
如上图会发现有个新的名词:BFCache
全称是back-forward cache,也就是“往返缓存”为了提高用户使用啥浏览器好的“后退”和“前进”按钮时加快页面的转换速度。
这个缓存中不仅保存着页面数据还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在了內存里。也就是说“后退”不光意味着html/js/css/接口等动静态资源不会重新请求连JS也不会重新执行。
图中不全都是form BFCache是因为我在测试页面中加入叻一个iframe,事实证明iframe不会被火狐的"往返机制"所缓存它依然遵循url+enter刷新中的请求方式。
这一点在MDN中也有明确指出:
如果页面位于bfcache中那么再次咑开该页面就不会触发load事件。
尽管由于内存中保存了整个页面的状态不触发load事件也不应该会导致什么问题,但为了更形象地说明bfcache的行为Firefox还是提供了一些新事件。
第一个事件就是pageshow这个事件在页面显示时触发,无论页面是否来自bfcache在重新加载页面中,pageshow会在load事件触发后触发;而对于bfcache中的页面pageshow会在页面状态完全恢复的那一刻触发。另外要注意的是虽然这个事件的目标是document,但必须将其事件处理程序添加到window
除了通常的属性之外,pageshow事件的event对象还包含一个名为persisted的布尔值属性如果页面中保存在了bfcache中,则这个属性的值为true;否则这个属性的值为false。
與pageshow事件对应的是pagehide事件该事件会在啥浏览器好卸载页面的时候触发,而且是在unload事件之前触发与pageshow事件一样,pagehide在document上面触发但其事件处理程序必须要添加到Windows对象。这个事件的event对象也包含persisted属性
好了以上就是这篇文章的全部内容了,wise啥浏览器好的详细介绍我们会在之后更新感興趣的请继续关注脚本之家。