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

F5

浏览器向服务器发出HTTP Request请求,请求中含有If-Modified-Since或者If-None-Match字段。服务器如果发现网页,或者页面上的静态资源没有修改过,则直接返回304状态码,这样服务器返回的Response很小,所以round-trip耗时不多,网页很快就刷新了。

Ctrl+F5

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

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

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

Pragma: no-cache

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

Pragma: no-cache

Cache-Control: max-age=0

增加字段的作用就是让中间的Cache对这个请求失效(具体还要看中间的CDN节点是如何实现的),这样返回的绝对是新鲜的资源!!(CDN技术原理分析)

Ctrl+F5在网页调试中的作用

网页开发调试过程中,Ctrl+F5很有用,可以很容易地让软件工程师进行页面效果测试,因为绕过了必要的缓存,每次都是从服务器返回的最新鲜的内容。还有的时候,你更新网页图片,但是没有更换图片名称,这时通过Ctrl+F5查看更新之后的效果,就非常简单方便。(麦新杰就常常这么干,因为更换图片名称需要修改代码,懒,懒到底,呵呵。。)

如果全站都是静态HTML资源呢?

例如本小站,全站页面都通过WP SUPER CACHE插件生成了静态HTML资源,用户访问网站任何页面,都是直接调用了已经成生的静态HTML页面,这个时候,Ctrl+F5就没有作用了,服务器最新鲜的内容,就是这些静态HTML资源,除非重新刷新这些静态资源。

要具体情况具体分析!