第一部分: 浏览器缓存如何控制?    

做网站,不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把。

  方案一: 无缓存

     说明:浏览器向服务器请求资源m.png, 然后服务器响应请求--找到对应的m.png后发送给浏览器。 之后,浏览器再次向服务器请求m.png, 服务器又发回了同样的一张图片....循环往复.....

   优点:浏览器请求,服务器响应,思路清楚简单容易实现。   

   缺点:每次都请求同样的资源时,服务器也在不断地响应,这是非常浪费带宽的。   

  方案二:有缓存-无更新

   说明: 同样,浏览器向服务器请求资源m.png,然后服务器找到后发送给浏览器,这时浏览器把m.png保存在本地(缓存), 这样以后每次再请求m.png时就不需要向服务器要了,直接从本地取就行了,但是下次这个m.png的内容换了呢?

   优点: 节省带宽(显然的,后续直接从本地取资源即可)。

   缺点:  如果服务器上的m.png内容改变,我就不能得到改变后的资源了,而是始终拿到本地的资源。

  方案三: 有缓存-有更新

   说明:  浏览器向服务器请求资源m.png,然后服务器找到后发送给服务器,同时还附带额外信息---过期时间,如Expires: Friday,26 Feb 2017 10:11:22GMT。  然后浏览器将图片和过期时间同时保存在本地。

       浏览器第二次向服务器请求资源,这时它会先查看过期事件是否已经达到,如果在过期事件之内,就直接使用本地缓存(状态304); 如果超出了这个过期时间,就重新向服务器发送请求,服务器再次发回最新资源和最新的过期时间, 浏览器再次保存...

   优点:  一方面可以在过期时间之内就可以不再重新请求资源,节省了带宽;另一方面也不会像第二种方案一样,而是可以得到新资源。

        缺点: 在过期时间之后就要重新请求资源,但是如果资源内容没改变呢? 这次拿回的资源不就浪费了带宽吗?除此之外,这种时间格式复杂,容易比对出错。

  方案四: 有缓存-有更新-更新机制加强

   说明: 刚才的更新机制是发送来过期时间,而现在服务器在发送资源给浏览器的时候不再发送具体的时间,而是发送一个Cache-Control,这里可以包含各种信息。如Cache-Control: max-age=300; 这种方式和上面方案类似, 只是时间过期使用数字,不容易出错。另外Cache-Control还可以是下面的一些值:

  • Public---表示服务器发送的资源可以被任何中间节点缓存,如 Server -> proxy1 -> proxy2 -> Browser,proxy1 和 proxy2也可以缓存资源,这样,下次请求时proxy2就可以返回资源。
  • Private---表示服务器发送的资源不可以被任何中间节点缓存。
  • no-cache---表示不使用Cache-Control的缓存控制方式(强缓存),而是使用Etag 或者 Last-Modified(协商缓存)字段来控制缓存。
  • no-store---表示真正地不用缓存方式(每次都请求最新的资源),Etag和Last-Modified也不用。
  • max-age---表示当前资源的有效时间(就是强制缓存,用于替代HTTP1.0的Expires的方案)。

     优点 : 使用max-age更加容易比对,其他的几个值使得缓存机制更加强大。

          缺点:同方案三,有可能导致浪费带宽。

  方案五: 有缓存-有更新-更新机制完美

   说明:为了解决方案四在300s后请求资源时得到了并未更新的资源而导致浪费带宽的情况,我们在给浏览器返回m.png图片时,);如果ETag改变,就发送新的m.png并且再发送一个新的Etag给浏览器保存,那么这时的max-age应该也是同样需要更新的,如此循环往复......

      与Etag功能类似的是Last-Modified/if-Modified-Since ,当资源过期时(max-age超时),发现资源具有Last-Modified声明(是浏览器接收到的资源最新被修改的时间),于是发送请求时带上If-Modified-Since(即刚才的Last-Modified的时间),web服务器收到请求时,将If-Modeified-Since时间的资源与当前资源对比, 如果没变, 就响应HTTP304,让浏览器使用缓存, 如果不是,就发送新的资源。

第二部分: 在url框中回车、F5 和 Ctrl + F5的区别是什么?

不少同学问,不都是刷新吗?还有什么区别?其实,还是有的。不同的方式会控制不同的缓存策略。
            其中,在地址栏按回车又分为两种情况。

(1)请求的URI在浏览器缓存中未过期,此时,使用Firefox的firebug插件在浏览器里显示的HTTP请求消息头如下:
                   Host    192.168.3.174:8080
                   User-Agent    Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
                   Accept    text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
                   Accept-Language    zh-cn,zh;q=0.5
                   Accept-Encoding    gzip, deflate
                   Accept-Charset    GB2312,utf-8;q=0.7,*;q=0.7
                   Connection    keep-alive
            HTTP返回状态显示200 OK,但是,后台Nginx服务器的access.log并没有找到该请求的记录,说明请求并没有真正提交到HTTP服务器。而是被浏览器发现缓存中还有 未过期的文件,直接把请求拦截了,firebug里面显示所谓的“请求头消息”、“响应头消息”都是浏览器“伪造”的。这种刷新,使用的网络流量是最小 的,可以说完全没有,时间消耗也是最少的就像你找到一盒没有过期的牛奶,觉得肯定没有问题,谁都没告诉就喝了。

(2)请求的URI在浏览器缓存中已过期,此时,firebug显示的HTTP请求消息头如下:
                   Host    192.168.3.174:8080
                   User-Agent    Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
                   Accept    text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
                   Accept-Language    zh-cn,zh;q=0.5
                   Accept-Encoding    gzip, deflate
                   Accept-Charset    GB2312,utf-8;q=0.7,*;q=0.7
                   Connection    keep-alive
                   If-Modified-Since    Mon, 04 Jul 2011 10:12:40 GMT
            多了一行If-Modified-Since,后台Nginx服务器的access.log也找到了该请求的记录,说明浏览器对这种情况的处理方法是:再 问一下服务器,请求的URI在某个时间之后有没有被修改过,而这个时间是由上次HTTP响应的Last-Modified决定的。服务器鉴定之后,没有修 改的话,返回304 Not Modified,浏览器收到后,从缓存里读出内容;有修改的话,返回200 OK,并返回新的内容。这种情况,就像你找到一盒已经过期的牛奶,于是问别人,还能不能喝,如果别人说可以,你就把它喝了,如果别人说不行,那你得就另外 找一盒新鲜的牛奶。

至于F5刷新,其HTTP请求消息头如下:
                   Host    192.168.3.174:8080
                   User-Agent    Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
                   Accept    text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
                   Accept-Language    zh-cn,zh;q=0.5
                   Accept-Encoding    gzip, deflate
                   Accept-Charset    GB2312,utf-8;q=0.7,*;q=0.7
                  Connection    keep-alive
                  If-Modified-Since    Mon, 04 Jul 2011 10:12:40 GMT
                  Cache-Control    max-age=0
            又多了一行Cache-Control: max-age=0,意思是说,我不管浏览器缓存中的文件过期没有,都去服务器询问一下,相当于上次HTTP响应的Expires暂时失效。服务器的响应处理流程同上。这种情况,就像你找到一盒牛奶,没有看它的有效期,直接就问别人能不能喝。

最后是Ctrl+F5刷新,其HTTP请求消息头如下:
                  Host    192.168.3.174:8080
                  User-Agent    Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
                  Accept    text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
                  Accept-Language    zh-cn,zh;q=0.5
                  Accept-Encoding    gzip, deflate
                  Accept-Charset    GB2312,utf-8;q=0.7,*;q=0.7
                  Connection    keep-alive
                  Pragma    no-cache
                  Cache-Control    no-cache
            If-Modified-Since没有了,Cache-Control换成了no-cache,此外Pragma行是为了兼容HTTP1.0,作用与 Cache-Control: no-cache是一样的。意思是,我不要缓存中的文件了,强制刷新,直接到服务器上重新下载,于是服务器的响应处理与首次请求这个URI一样,返回 200 OK和新的内容。这种刷新,使用的网络流量是最大的,也是最耗时的。这就像你虽然发现了一盒牛奶,但是把它扔掉了,直接去买一盒新的。

参考:http://www.cnblogs.com/zhuzhenwei918/p/6437574.html

浏览器缓存控制 以及 在url框中回车、F5 和 Ctrl + F5的区别的更多相关文章

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

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

  2. 浏览器中F5和CTRL F5的行为区别及如何强制更新资源

    一.浏览器中F5和CTRL F5的行为区别 我们直接来看效果,下面是我打开qq网页,分别使用F5和CTRL F5,我们来看区别. F5: CTRL F5: 区别: 首先直观上的区别是CTRL F5明显 ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. 浏览器的F5和Ctrl+F5

    在浏览器里中,按F5键和按F5同时按住Ctrl键(简称Ctrl+F5),效果是不同,到底两者有什么区别呢? 假如我第一次访问过http://localhost/home,这个网页是个动态网页,每次访问 ...

随机推荐

  1. Influx Sql系列教程六:insert 修改数据

    在influxdb中没有专门的修改数据的update语句,对于influxdb而言,如果想修改数据,还是得使用我们前面的说到的insert来实现,那么怎么判断一条insert语句是插入还是修改呢? 1 ...

  2. eNSP上配置RIPv2的认证

    实验拓扑图如下 首先我们对各个路由器及终端PC进行基本ip设置 然后我们在路由器上设置RIPv2协议  并添加要通告的网段 然后我们查看路由表查看路由器已经学到的路由 接下来我们用R3模拟攻击者 通过 ...

  3. GhostScript说明

    关于ghostscript(以下简称gs).Gs是一个地下工作者,一般用户不熟悉它,因为它上不和用户直接打交道,下不直接接触打印机.但是在打印工作中它却扮演了极为重要的解色. 一般从用户常见文件如图片 ...

  4. SDOI2019 Round2

    这鬼家伙已经咕了好久了-- SDOIR2的题目挺好玩的- 快速查询(???) 不难发现所有的操作都可以通过区间打Tag实现 那么可以维护两个标记\(a,b\)表示序列中的数为\(x\)时实际表示的值是 ...

  5. Luogu4705 玩游戏 分治FFT

    传送门 \(\begin{align*} Ans_k &= \sum\limits_{i=1}^n\sum\limits_{j=1}^m (a_i + b_j)^k \\ &= \su ...

  6. 广度优先搜索(BFS)思路及算法分析

    1.算法用途: 是一种图像搜索演算法.用于遍历图中的节点,有些类似于树的深度优先遍历.这里唯一的问题是,与树不同,图形可能包含循环,因此我们可能会再次来到同一节点. 2.主要思想: 主要借助一个队列. ...

  7. js 简单的滑动1

    js 简单的滑动教程(一)   作者:Lellansin 转载请标明出处,谢谢 首先我们要实现一个简单的滑动,三张图.点击左边向左滑动,点右向右滑,碰到临界值的时候就不能滑动. 这个简单滑动的原理是, ...

  8. Mac 达芬奇【Davinci Resolve】 无法添加媒体

    参考 : https://zhidao.baidu.com/question/182613491787331404.html 打开软件,点击默认的未命名项目: 点击左上角图中箭头位置: 选中系统-&g ...

  9. whois

    import 'dart:io'; import 'dart:convert'; main()async{ List a = ['1.cn','2.cn','3.cn','4.cn','5.cn',' ...

  10. 博客使用 utterances 作为评论系统

    utterances 是一款基于 GitHub issues 的评论工具. 相比同类的工具 gitment.gitalk 以及 disqus 评论工具,优点如下: 极其轻量 加载非常快 配置比较简单 ...