浏览器中F5和CTRL F5的行为区别及如何强制更新资源
来源:互联网 发布:远程网络教育的大学 编辑:程序博客网 时间:2024/04/26 00:49
原文链接:http://www.cnblogs.com/shytong/p/5435341.html
一、浏览器中F5和CTRL F5的行为区别
我们直接来看效果,下面是我打开qq网页,分别使用F5和CTRL F5,我们来看区别。
F5:
CTRL F5:
区别:
首先直观上的区别是CTRL F5明显比F5加载速度慢了。观察资源加载发现,F5中大部分资源的状态码都是304,也就是重定向,使用了很多缓存资源;而CTRL F5中所有资源状态码都是200,都是重新下载了资源。
1.F5使用缓存,并且只有在资源内容发生变化的时候才会去更新资源
当刷新一个页面的时候,浏览器会尝试使用各种类型的缓存,并且会发送If-Modified-Since头到服务器,如果服务器返回304 Not Modified,那么浏览器会使用本地的缓存;如果服务器返回200 OK和资源内容,那么浏览器会使用返回的资源内容,并把资源内容进行缓存,待下次使用。
注:刷新页面,会让浏览器向服务端发起验证,忽略 max-age。
2.CTRL-F5 强制更新页面资源的缓存
MSIE会发送Cache-Control: no-cache头,Firefox和Chrome除了发送Cache-Control: no-cache头之外,还会发送Pragma: no-cache头。Opera比较另类,不发送任何和缓存相关的头。
二、如何强制更新资源
1.加上请求头If-Modified-Since和Cache-Control
下面我们来看CTRL F5是如何做到强制更新资源而不适用缓存的。
我们看上面例子如何做到的
我们发现http请求头中多了cache-control:no-control;如果服务器响应头中规定了Last-Modified,我们还需要在http头部加上If-Modified-Since:0。
在ajax中可以使用setRequestHeader()方法。
注:no-cache 并不是说「不缓存」,它意味着使用缓存前必须检查(或者说验证)这个资源在服务端是否有更新。no-store 用来告知浏览器完全不要缓存这个资源。类似的,must-revalidate 并不是说「每次都要验证」,它意味着某个资源在本地已缓存时长短于 max-age 指定时长时,可以直接使用,否则就要发起验证。
2.meta方法
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="0">
3.清理form表单的临时缓存
<body onLoad="javascript:document.yourFormName.reset()">
其实form表单的缓存对于我们书写还是有帮助的,一般情况不建议清理,但是有时候为了安全问题等,需要清理一下!
4.随机数或者随机时间
URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了在 URL 参数后加上 "?timestamp=" + new Date().getTime();
- 浏览器中F5和CTRL F5的行为区别及如何强制更新资源
- 浏览器中F5和CTRL F5的行为区别
- 浏览器: F5 和 Ctrl+F5的区别
- 浏览器: F5 和 Ctrl+F5的区别
- 浏览器: F5 和 Ctrl+F5的区别
- 浏览器中F5与Ctrl+F5的区别(有图有真相)
- 浏览器中F5、Ctrl+F5和位址栏输入的区别
- C#中F5和ctrl+F5的区别是什么?
- C#中F5和ctrl+F5的区别到底是什么?
- C# F5和ctrl+F5的区别 ?
- ctrl + F5和F5的区别
- F5和CTRL+F5的区别
- 浏览器中F5刷新和crtl+F5的区别
- F5刷新和Ctrl+F5强制刷新
- 在浏览器中,按f5(浏览器中的刷新按钮),与f5+ctrl 、回车的区别
- c# 运行时快捷键 F5和 Ctrl + F5 的区别
- 浏览器 回车、F5、Ctrl+F5
- F5与CTRL+F5区别,浏览器缓存机制
- 深入剖析Android音频之AudioTrack 2014-10-11 11:05
- Webstorm 下的Angular2.0开发之路
- 解决应用程序无法正常启动0xc0150002问题
- laravel 生成app_key
- 为什么说产品化是私有IaaS的唯一出路?
- 浏览器中F5和CTRL F5的行为区别及如何强制更新资源
- Java 集合框架
- windows下python安装scipy库的方法
- mysql 全文索引
- 微信小程序 wxml 中一些属性的使用
- selenium之 chromedriver与chrome版本映射表(更新至v2.27)
- Android访问权限Permission
- C语言的内存管理
- 注入的两种方式