zoukankan      html  css  js  c++  java
  • 比较浏览器的“刷新”


    名词解释:
    缓存(cache memory):数据交换的缓冲区。


    当使用的是post方法时,不会有对应的缓存;当使用的是get方法时,会有对应的缓存。
    使用“刷新”的功能时相当于第一次向服务器发送请求;而再次点击回车键相当于读取缓存中的数据。

     


    我们一直在用着浏览器刷新,从 http 协议的角度来看,我们常见的有三种刷新:

    1、再次点击enter键或者超链接a标签;
    2、F5或者Ctrl+R 普通刷新;
    3、ctrl+F5 强制刷新。

    这三种刷新究竟有何不同呢?举三个简单的例子大家就明白了。

    条件:将要访问的url路径,最近已经使用浏览器访问过,并且没有超过缓存的时间。比如您在前1分钟刚刚访问过此url路径。

    1、点击Enter键或者点击a标签的超链接。

      比如我们点击超链接后,发现用firebug查看网络请求是灰色的,说明此请求来自于缓存。其实此请求并没有发送到后端node.js,而是浏览器直接读取的缓存的数据 。这里需要设置 response.setHeader(‘Cache-Control’, 'public, max-age=3600'); //缓存3600秒,也就是缓存一小时


    2、F5刷新
      还是那个url地址,只不过这次我轻轻的按了下F5键,我们仔细看响应状态码,变成304了,这里浏览器是去请求了后端node.js服务器,同时它带上了2个重要的参数:

    1、If-Modified-Since:对应的node.js响应头 Last-Modified

    2、If-None-Match:对应的node.js响应头 Etag

      当node.js服务器收到这样的http请求后,则去判断是否需要更新客户端的缓存,至于使用 Last-Modified 还是 Etag 来判断缓存是否更新就要看您的node.js服务器代码是怎么写的了。expressjs是优先判断Etag(至于Etag的值如何获取,也要看您使用的web服务器是怎么获取的,可以是修改时间+文件大小的md5值或者其他)。如果node.js服务器判断 Last-Modified 还是 Etag 后,认为此请求资源还在缓存里面,则返回 304状态码,以及最新的 Last-Modified和Etag。并且响应头没 有“Content-Length”属性,说明响应的body是空的,浏览器收到304状态码以后,认为资源未被修改,所以就直接去取缓存响应给用户了。

    3、ctrl+F5强制刷新

      我们可以仔细看下请求头,没有了第2种情况的2个缓存头,和第一次来访问此url地址是一样的,所以node.js服务器就直接将图片响应给浏览器了,所以这时是没有使用任何浏览器缓存的。

      三种刷新的情况相信您已经全看明白了,百分之90%的用户是使用第一或者第二种的。由此可以看出缓存技术至关重要。对于一些不经常修改的页面完全可以使用 Cache-Control,让请求都不用发了,节约服务器资源,快速响应。对于一些静态图片等一定要加上 Last-Modified 或者 Etag,因为一般此类资源体积都比较大,缓存做好的话可以提高不少效率。当然,不论是静态文件、json数据,还是html数据,都可以充分地利用浏览器缓存,只要你遵循http协议。

       

     

  • 相关阅读:
    路由器设置无线网的方法
    numpy, pandas, matplotlib等常用库的学习手册
    文本乱码的解决办法
    漫画:SOA中怎样确定服务的粒度?
    漫画:大公司都在重复造轮子吗?
    演讲稿:新人培养之道
    漫画:全面理解java.lang.IllegalArgumentException及其可用性设计
    漫画:性能、可用性和锁
    漫画:Linux中/etc/resolv.conf文件和puppet工具解析
    《两地书》--Kubernetes(K8s)基础知识(docker容器技术)
  • 原文地址:https://www.cnblogs.com/zzp-biog/p/9798947.html
Copyright © 2011-2022 走看看