Browser: F5 vs Ctrl+F5 || Using Ctrl+F5 in IE 7

http://blog.httpwatch.com/2007/10/19/using-ctrlf5-in-ie-7/

 

http://hi.baidu.com/xlnan/blog/item/5d217cdd6db208e776c638a5.html

 

在浏览器里中,按F5键或者点击Toobar上的Refresh/Reload图标(简称F5),和做F5同时按住Ctrl键(简称Ctrl+F5),效果是明显不一样的,通常Ctrl+F5明显要让网页Refresh慢一些,到底两者有什么区别呢?

上一篇技术文章 中,说到了Expires、Last-Modified/If-Modified-Since和ETag/If-None-Match这些HTTP Headers,F5/Ctrl+F5和这些有莫大关系。

假如我第一次访问过http://www.example.com ,这个网页是个动态网页,每次访问都会去访问Server,但是它包含一个一个静态资源http://www.example.com/logo.gif ,浏览器在显示这个网页之前需要发HTTP请求获取这个logo.gif文件,返回的HTTP response包含这样的Headers:

Expires: Thu 27 Nov 2008 07:00:00 GMT 
Last-Modified: Fri 30 Nov 2007 00:00:00 GMT

那么浏览器就会cache住这个logo.gif文件,直到2008年11月27日7点整,或者直到用户有意清空cache。

下次我再通过bookmark或者通过在URI输入栏直接敲字的方法访问http://www.example.com 的时候,浏览器一看本地有个logo.gif,而且它还没过期呢,就不会发HTTP request给server,而是直接把本地cache中的logo.gif显示了。

F5的作用和直接在URI输入栏中输入然后回车是不一样的 ,F5会让浏览器无论如何都发一个HTTP Request给Server,即使先前的Response中有Expires Header。所以,当我在当前http://www.example.com 网页中按F5的时候,浏览器会发送一个HTTP Request给Server,但是包含这样的Headers:

If-Modified-Since: Fri 30 Nov 2007 00:00:00 GMT

实际上Server没有修改这个logo.gif文件,所以返回一个304 (Not Modified),这样的Response很小,所以round-trip耗时不多,网页很快就刷新了。

上面的例子中没有考虑ETag,如同在上一篇技术文章 中所说,最好就不要用ETag,但是如果Response中包含ETag,F5引发的Http Request中也是会包含If-None-Match的。

那么Ctrl+F5呢?  Ctrl+F5要的是彻底的从Server拿一份新的资源过来 ,所以不光要发送HTTP request给Server,而且这个请求里面连If-Modified-Since/If-None-Match 都没有,这样就逼着Server不能返回304,而是把整个资源原原本本地返回一份,这样,Ctrl+F5引发的传输时间变长了,自然网页Refresh的也慢一些。

实际上,为了保证拿到的是从Server上最新的,Ctrl+F5不只是去掉了If-Modified-Since/If-None-Match,还需要添加一些HTTP Headers。按照HTTP/1.1协议,Cache不光只是存在Browser终端,从Browser到Server之间的中间节点(比如Proxy)也可能扮演Cache的作用,为了防止获得的只是这些中间节点的Cache,需要告诉他们,别用自己的Cache敷衍我,往Upstream的节点要一个最新的copy吧。

在IE6中,Ctrl+F5会添加一个Header

Pragma: no-cache

在Firefox 2.0中,Ctrl+F5会添加两个

Pragma: no-cache 
Cache-Control: max-age=0

作用就是让中间的Cache对这个请求失效,这样返回的绝对是新鲜的资源Smile

Update: 你可能发现在某些浏览器(比如Chrome和IE7/IE8)中行为和此文中描述的不一致。

在实验Microsoft的Fiddler网络嗅探工具的时候,意外地发现,在Google Chrome里面按Ctrl + F5居然一样会发送If-Modified-Since header,这和我一直理解的浏览器行为 不一致,之前我在IE6和FireFox 2.X中做过实验,按F5(Refresh)会在发送的HTTP请求中包含If-Modified-Since,但是Ctrl+F5不会。

image

试验了一下Firefox 3.X,行为和Firefox 2.X还是一致的,但是IE8 Beta的行为和Chrome一样,这样的效果就是Ctrl + F5下网页的刷新时间可能要快一些,难不成这两个浏览器为了提高效率修改了Ctrl + F5的行为?

研究了一下这个现象,有人也发现了这个问题 ,原来在IE7和IE8中,如果焦点(focus)在网页中,Ctrl+F5还是行为如往常的,但是如果focus在URL输入栏中,Ctrl键时被忽略的,所以Ctrl+F5就和F5的行为一样了(这是一个bug还是一个feature?)。我一开始的实验就是因为focus在URL栏中所以Ctrl+F5也发送If-Modified-Since。

但是对Chrome,就没有定义Ctrl+F5的行为,只定义了F5就是Reload,不管焦点在哪里,Ctrl+F5就是和F5行为一样,至少对于我现在使用的1.0.0154.36版本还是这样的。也许Chrome是有意去掉了Ctrl + F5的功能,这样虽然行为和其他浏览器不一致,但是有时候会让用户感觉它要快一些:-)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值