[转帖]浏览器的F5和Ctrl+F5
浏览器的F5和Ctrl+F5
https://www.cnblogs.com/xiangcode/p/5369084.html
在浏览器里中,按F5键和按F5同时按住Ctrl键(简称Ctrl+F5),效果是不同,到底两者有什么区别呢?
假如我第一次访问过http://localhost/home,这个网页是个动态网页,每次访问都会去访问Server,但是它包含一个一个静态资源http://localhost/content/bootstrap.css,浏览器在显示这个网页之前需要发HTTP请求获取这个bootstrap.css文件,返回的HTTP response包含这样的Headers:
下次我再通过bookmark或者通过在URI输入栏直接敲字的方法访问http://localhost/home的时候,浏览器一看本地有个bootstrap.css,而且它还没过期呢,就不会发HTTP request给server,而是直接把本地cache中的bootstrap.css显示了。
F5的作用和直接在URI输入栏中输入然后回车是不一样的,F5会让浏览器无论如何都发一个HTTP Request给Server,即使先前的Response中有Expires Header。所以,当我在当前http://localhost/home网页中按F5的时候,浏览器会发送一个HTTP Request给Server,但是包含这样的Headers:
If-Modified-Since: Wed, 20 Jan 2016 10:24:40 GMT
实际上Server没有修改这个bootstrap.css文件,所以返回一个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,而是把整个资源原原本本地返回一份。
实际上,为了保证拿到的是从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对这个请求失效,这样返回的绝对是新鲜的资源
Pragma 当"no-cache"出现在请求消息中时,应用程序应当向原始服务器推送此请求,即使它已
经在上次请求时已经缓存了一份拷贝。这样将保证客户端能接收到最权威的回应。它也用来
在客户端发现其缓存中拷贝不可用或过期时,对拷贝进行强制刷新。
cache-control
max-age>0 时 直接从游览器缓存中 提取
max-age<=0 时 向server 发送http 请求确认 ,该资源是否有修改
有的话 返回200 ,无的话 返回304.
[转帖]浏览器的F5和Ctrl+F5的更多相关文章
- 浏览器中F5和CTRL F5的行为区别及如何强制更新资源
一.浏览器中F5和CTRL F5的行为区别 我们直接来看效果,下面是我打开qq网页,分别使用F5和CTRL F5,我们来看区别. F5: CTRL F5: 区别: 首先直观上的区别是CTRL F5明显 ...
- 浏览器缓存如何控制? && 在url框中回车、F5 和 Ctrl + F5的区别是什么?
第一部分: 浏览器缓存如何控制? 最近在做网站,但是不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存 说明: 浏览器向服务器请求 ...
- 浏览器缓存控制 以及 在url框中回车、F5 和 Ctrl + F5的区别
第一部分: 浏览器缓存如何控制? 做网站,不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存 说明:浏览器向服务器请求资源m.pn ...
- 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别
不少同学问,不都是刷新吗?还有什么区别?其实,还是有的. 其中,在地址栏按回车又分为两种情况.一是请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP ...
- 转:在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别
转:http://www.cnblogs.com/mofish/archive/2012/06/08/2541604.html 不少同学问,不都是刷新吗?还有什么区别?其实,还是有的. 其中,在地址栏 ...
- 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别--转
其中,在地址栏按回车又分为两种情况.一是请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP请求消息头如下: Host 192.168.3.17 ...
- 浏览器的F5和Ctrl+F5
在浏览器里中,按F5键和按F5同时按住Ctrl键(简称Ctrl+F5),效果是不同,到底两者有什么区别呢? 假如我第一次访问过http://localhost/home,这个网页是个动态网页,每次访问 ...
- 在浏览器地址栏按回车、F5、ctrl+F5刷新页面的区别
url地址栏里敲击enter:这样的刷新,大家可以在firebug里看一下,只有少数的请求会发送出去,而且几乎没有图片的请求,这是因为请求时会先检查本地是不是缓存了请求的图片,如果有缓存而且没有过期( ...
- F5与Ctrl+F5及地址栏输入地址回车
按F5等同于点击页面地址栏的刷新图标. 地址栏输入地址然后回车: 根据缓存内容是否过期决定是否发送请求给服务端 F5: 浏览器无论如何都得发送请求给服务端,包含If-Modified-Since/If ...
随机推荐
- win32gui.Findwindow(parm1,parm2)查找窗口的句柄方法
介绍之前先让大家了解一下win32gui的模块用法 和 获取窗口类名工具 使用Python时,有时也会要操作到系统窗口的一些东西,下面就介绍win32gui.Findwindow(param1,par ...
- spring cloud(Greenwich.M2) hystrix dashboard 报/actuator/hystrix.stream 404 Not Found的问题
consumer端不引用spring-boot-starter-actuator的情况 Consumer端会报Unable to connect to Command Metric Stream.新建 ...
- Django-rest-framework 接口实现 认证:(auth | authentication)
认证:(auth | authentication) REST framework提供了一些开箱即用的身份验证方案,并且还允许你实现自定义方案. 在 rest_framework.authentica ...
- Python:Day51 web框架
from wsgiref.simple_server import make_server def application(environ, start_response): start_respon ...
- 环境部署(八):jenkins配置邮件通知
完成基于jenkins的持续集成部署后,任务构建执行完成,测试结果需要通知到相关人员.这篇博客,介绍如何在jenkins中配置邮件通知的方法... 一.安装邮件插件 由于Jenkins自带的邮件功能比 ...
- Generative Adversarial Nets[EBGAN]
0. 背景 Junbo Zhao等人提出的"基于能量的GAN"网络,其将判别器视为一个能量函数而不需要明显的概率解释,该函数可以是一个可训练的损失函数.能量函数是将靠近真实数据流形 ...
- RabbitMQ详解(一)------简介与安装
RabbitMQ 这个消息中间件,其实公司最近的项目中有用到,但是一直没有系统的整理,最近看完了<RabbitMQ实战 高效部署分布式消息队列>这本书,所以顺便写写. 那么关于 Rabb ...
- 安装kubelet报错 : Depends: init-system-helpers (>= 1.18~) but 1.14ubuntu1 is to be installed
解决办法: wget http://launchpadlibrarian.net/173841617/init-system-helpers_1.18_all.deb dpkg -i init-sys ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- flask异常处理
对于异常,通常可以分为两类:一类是可以预知的异常,我们通常会用try...except....捕捉,第二类是未知的error,我们是无法预知的. try: code block except A: e ...