一、浏览器中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();

参考资料:http://weizhifeng.net/difference-between-f5-and-ctrl-f5.html

       http://www.haorooms.com/post/js_llq_hc

浏览器中F5和CTRL F5的行为区别及如何强制更新资源的更多相关文章

  1. 浏览器缓存如何控制? && 在url框中回车、F5 和 Ctrl + F5的区别是什么?

    第一部分: 浏览器缓存如何控制?   最近在做网站,但是不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存   说明: 浏览器向服务器请求 ...

  2. 浏览器缓存控制 以及 在url框中回车、F5 和 Ctrl + F5的区别

    第一部分: 浏览器缓存如何控制?   做网站,不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存   说明:浏览器向服务器请求资源m.pn ...

  3. [转帖]浏览器的F5和Ctrl+F5

    浏览器的F5和Ctrl+F5 https://www.cnblogs.com/xiangcode/p/5369084.html 在浏览器里中,按F5键和按F5同时按住Ctrl键(简称Ctrl+F5), ...

  4. 改变浏览器中默认的ctrl+s方法

    在一般的情况下,我们在浏览网页的时候按下ctrl+s,浏览器会弹出一个保存网页的框. 但是在一些特定的网页中,我们希望ctrl+s不是弹出默认的保存窗口,而是进行一下别的操作. 比如在我们使用简书的时 ...

  5. 浏览器中F5和CTRL F5的行为区别

    前言 在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新:Ctrl-F5的行为也是刷新页面,但是会清除浏览器缓存,这在前端调试时候会常用.二者真正的区别是什么呢?在stackove ...

  6. 【转】浏览器中F5和CTRL F5的行为区别

    原文地址:http://www.cnblogs.com/jiji262/p/3410518.html 前言 在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新:Ctrl-F5的行为 ...

  7. 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

    不少同学问,不都是刷新吗?还有什么区别?其实,还是有的. 其中,在地址栏按回车又分为两种情况.一是请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP ...

  8. 转:在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

    转:http://www.cnblogs.com/mofish/archive/2012/06/08/2541604.html 不少同学问,不都是刷新吗?还有什么区别?其实,还是有的. 其中,在地址栏 ...

  9. 在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别--转

    其中,在地址栏按回车又分为两种情况.一是请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP请求消息头如下: Host    192.168.3.17 ...

随机推荐

  1. Spring的下载与安装

    Spring是一个独立的框架,不依赖于任何Web服务器或容器.它既可在独立的JavaSE项目中使用,也可以在Java Web项目中使用. 下载和安装Spring框架可按如下步骤进行: 1.登录http ...

  2. 笔记:CSS hack的学习与了解…

    更新时间:2015.05.12 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记  I ...

  3. 一份不太简短的LaTeX模板

    编译环境: Ubuntu16.04 texllive2016 sublime text3 + latextools 该模板使用与自己写文档,记笔记,记录代码,写作业等等. %!TEX program ...

  4. bzoj3262(cdq分治模板)

    裸的cdq,注意去重: #include<iostream> #include<cstdio> #include<cmath> #include<cstrin ...

  5. c语言:辗转相除法求最大公约数、最小公倍数

    辗转相除法,又称欧几里得算法.两个正整数a和b(a>b),它们的最大公约数等于余数c和较小的数b之间的最大公约数.最小公倍数=两数之积/最大公约数 #include <stdio.h> ...

  6. web-day16

    第16章WEB16-Listener&Filter篇 今日任务 使用过滤器完成自动登录的案例 使用过滤器统一网站的字符集编码 教学导航 教学目标 了解常见的监听器 理解过滤器的生命周期 能够使 ...

  7. ScheduledExecutorService的使用

    http://407827531.iteye.com/blog/1329597 ScheduledExecutorService接口 在ExecutorService的基础上,ScheduledExe ...

  8. Hdu3829 Cat VS Dog(最大独立点集)

    Cat VS Dog Problem Description The zoo have N cats and M dogs, today there are P children visiting t ...

  9. shell工具-sort

    sort sort命令是在Linux里非常有用,它将文件进行排序,并将排序结果标准输出 基本语法 sort [选项] [参数] 选项说明 选项 说明 -n 依照数值大小排序 -r 以相反的顺序排序 - ...

  10. cxGrid实现取消过滤和排序后定位到首行(单选和多选)

    cxGrid实现取消过滤和排序后定位到首行(单选和多选) 原创 2013年10月06日 18:42:24 2107 DataContoller中的函数FocusedRecordIndex没有反应,Fo ...