原文地址:http://www.cnblogs.com/jiji262/p/3410518.html

前言

在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新;Ctrl-F5的行为也是刷新页面,但是会清除浏览器缓存,这在前端调试时候会常用。二者真正的区别是什么呢?在stackoverflow上有人给出了很详细的解释,整理如下。

说明

在不同的浏览器中F5和CTRL-F5的行为是不一样的,但是他们的主要行为还是非常相似的,以下结果是在FF,IE,Opera和Chrome中进行过测试得出。

  • F5使用缓存,并且只有在资源内容发生变化的时候才会去更新资源。

当刷新一个页面的时候,浏览器会尝试使用各种类型的缓存,并且会发送If-Modified-Since头到服务器,如果服务器返回304 Not Modified,那么浏览器会使用本地的缓存;如果服务器返回200 OK和资源内容,那么浏览器会使用返回的资源内容,并把资源内容进行缓存,待下次使用。

  • CTRL-F5 强制更新页面资源的缓存。

(这里的Cache-Control是指request header里面的Cache-Control哦,如果request header里面的Cache-Control表示,不从本地获取也不从CDN缓存获取,直达服务器,从服务器获取数据)MSIE会发送Cache-Control: no-cache头,Firefox和Chrome除了发送Cache-Control: no-cache头之外,还会发送Pragma: no-cache头。Opera比较另类,不发送任何和缓存相关的头。

以下表格很直观的表明了F5和CTRL-F5的行为,由于原文中测试的浏览器版本较低,所以进行了更新。

Updated table, 27 September 2010

+------------+-----------------------------------------------+
| UPDATED | Firefox 3.x |
|27 SEP 2010 | +--------------------------------------------+
| | | MSIE 8, 7 |
| Version 3 | | +-----------------------------------------+
| | | | Chrome 6.0 |
| | | + +--------------------------------------+
| | | | | Chrome 1.0 |
| | | | | +-----------------------------------+
| | | | | | Opera 10, 9 |
| | | | | | +--------------------------------+
| | | | | | | |
+------------+--+--+--|--+-----------------------------------+
| F5|IM|I |IM|IM|C | |
| SHIFT-F5|- |- |CP|IM|- | Legend: |
| CTRL-F5|CP|C |CP|IM|- | I = "If-Modified-Since" |
| ALT-F5|- |- |- |- |*2| P = "Pragma: No-cache" |
| ALTGR-F5|- |I |- |- |- | C = "Cache-Control: no-cache" |
+------------+--+--+--|--+--+ M = "Cache-Control: max-age=0" |
| CTRL-R|IM|I |IM|IM|C | - = ignored |
|CTRL-SHIFT-R|CP|- |CP|- |- | |
+------------+--+--+--|--+--+ |
| Click|IM|I |IM|IM|C | With 'click' I refer to a |
| Shift-Click|CP|I |CP|IM|C | mouse click on the browsers |
| Ctrl-Click|*1|C |CP|IM|C | refresh-icon. |
| Alt-Click|IM|I |IM|IM|C | |
| AltGr-Click|IM|I |- |IM|- | |
+------------+--+--+--+--+--+--------------------------------+

Versions tested:

HTTP协议说明

HTTP/1.1规范14.9.4中规定:

  • End-to-end reload(即CTRL-F5强制刷新)会发送如下HTTP头: 
    Cache-Control: no-cache 
    Pragma: no-cache

  • Specific end-to-end revalidation(即F5 刷新)会发送如下HTTP头: 
    Cache-Control: max-age=0 
    If-Modified-Since: Fri, 15 Apr 2011 12:08:21 GMT

参考:

http://stackoverflow.com/questions/385367/what-requests-do-browsers-f5-and-ctrl-f5-refreshes-generate

最新文章

  1. MVVM大比拼之vue.js源码精析
  2. ruby 编译安装,gem国内源ruby.taobao.org
  3. [CareerCup] 16.2 Measure Time in a Context Switch 测量上下文转换的时间
  4. xml问题报错处理
  5. 地图API使用文档-以腾讯地图为例
  6. java dom4j写入XML
  7. maven依赖的全局排除
  8. Photoshop:热气球的制作方法
  9. Oracle 集群心跳及其參数misscount/disktimeout/reboottime
  10. Scrapy研究和探索(七)——如何防止被ban大集合策略
  11. Framework7
  12. 图像处理------基于Otsu阈值二值化
  13. 概率与统计推断第二讲homework
  14. excel生成数据地图
  15. c/c++连通图的遍历(深度遍历/广度遍历)
  16. LeetCode 905. Sort Array By Parity
  17. JS设计模式(10)职责链模式(重要)
  18. 【转载】linux ls -l命令详解
  19. 【java】详解JDK的安装和配置
  20. 【android】模拟点击某个指定坐标作用在View上

热门文章

  1. 使用Oracle 11g新特性 Active Database Duplication 搭建Dataguard环境
  2. linux之管道
  3. TypeError: parse() got an unexpected keyword argument 'transport_encoding' 安装tensor后报错
  4. C# 自定义exe引用的dll路径
  5. LeetCode Kill Process
  6. input type="file" accept="image/*"上传文件慢的问题解决办法
  7. CentOS上面搭建SVN服务器
  8. PMODB GT202 WIFI的使用
  9. 【转】Jmeter MySQL数据库性能测试
  10. MySQL-事务的实现-redo