一、浏览器中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. Redis集群命令行部署工具

    使用之前准备工作: 1)配置好与端口无关的公共redis.conf文件,和工具放在同一目录下 2)配置好与端口相关的模板redis-PORT.conf文件,也和工具放在同一目录下(部署时PORT会被替 ...

  2. Ng第十一课：机器学习系统的设计(Machine Learning System Design)

    11.1  首先要做什么 11.2  误差分析 11.3  类偏斜的误差度量 11.4  查全率和查准率之间的权衡 11.5  机器学习的数据 11.1  首先要做什么 在接下来的视频将谈到机器学习系 ...

  3. Qt_MainWindow简介

    QMainWindow 是Qt框架带来的一个预定义好的主窗口类.按照建立HelloWorld程序建立工程,直接运行,或有一个空窗口. main().cpp #include "mainwin ...

  4. Linux 禁ping和开启ping操作

    方法一:     # echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all 如果要恢复,只要: # echo 0 > /proc/sys/net ...

  5. concurrent.future

    concurrent.future module provides a high-level interface for asynchronously executing callables. Bas ...

  6. noip第6课作业

    1.    数据统计 [问题描述] 输入N个整数,求出它们的最小值.最大值和平均值(保留3位小数).输入保证这些数都是不超过1000的整数.(1<=N<=1000) [样例输入] 8 2 ...

  7. 入手IntelliJ IDEA 常用配置

    Idea常用设置 下载地址:https://www.jetbrains.com/idea/ 激活服务器:http://idea.iteblog.com/key.php 代码补全取消区分大小写 Inte ...

  8. [proposal][app]Watch your time!

    [Motivation] 很多时候,我们要去某个地方,尤其是第一次去的时候,都不知道什么时候出发,留出的时间够不够,会不会早到或者晚到.虽然地图软件能给出一些粗略的步行,公交,或者出租时间估计,但是每 ...

  9. mssql中按周进行表分区的方法

    创建一个包含了一个持久化计算列的表,类似于下面.然后以这个列作为分区的依据. CREATE TABLE [dbo].[test] ( ) NOT NULL , [time] [DATETIME] NU ...

  10. Python 数据结构与算法—— 快排

    1. 先从待排序的数组中找出一个数作为基准数(取第一个数即可),然后将原来的数组划分成两部分:小于基准数的左子数组和大于等于基准数的右子数组.然后对这两个子数组再递归重复上述过程,直到两个子数组的所有 ...