web浏览器缓存机制_网站利用浏览器缓存

web浏览器缓存机制_网站利用浏览器缓存浏览器缓存机制之一(经典缓存)因为在接手的项目中用到过比较新的HTML5应用缓存,也用到了经典的缓存如设置max-age,Etag之类,而之前一直就是在用着没有去深究其中原理。周末天气不好,懒得出去了,正好找时间总结下。1.关于浏览器缓存记得去年看《HTTP权威指南》的时候,有一章是专门讲浏览器缓存的,一年时间过得太快,逝去的时光还真是如同人群中消失的好姑娘,眼看她嫁给别人。我这里把浏览器缓存分为…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

浏览器缓存机制之一(经典缓存)

因为在接手的项目中用到过比较新的HTML5应用缓存,也用到了经典的缓存如设置max-age,Etag之类,而之前一直就是在用着没有去深究其中原理。周末天气不好,懒得出去了,正好找时间总结下。

1.关于浏览器缓存

记得去年看《HTTP权威指南》的时候,有一章是专门讲浏览器缓存的,一年时间过得太快,逝去的时光还真是如同人群中消失的好姑娘,眼看她嫁给别人。我这里把浏览器缓存分为经典的浏览器缓存(以下简称为经典缓存)和HTML5应用缓存这两类。

经典的浏览器缓存其实主要由几个响应变量来设置,如Cache-Control(设置max-age指定文档处于新鲜期的秒数),Pragma(Pragma主要用于HTTP1.0,HTTP1.1用Cache-Control),Expires(不推荐,因为它指定的是过期的绝对日期而不是相对秒数),Etag和Last_Modified。其中Etag则对应请求头部中的If_None_Match(简写为INM),Last_Modified对应If_Modified_Since(简写为IMS).新的HTML5应用缓存则是支持离线存储文档,使得文档数据离线有效,节省了流量,在移动端使用的较多。

2.经典缓存

默认情况下apache对文档内容如html,图片,css等会在响应中加Etag以及Last_Modified。这样下次请求的时候会带上INM以及IMS,如果文档内容没有修改,那么返回304 Not Modified,然后就可以从缓存中取之前缓存的文件了;如果文档从那个时间点后修改过了,那么返回200和文档的新内容。下面分别用apache来测试下cache-control,expires,INM以及IMS的效果。

2.1 Cache-Control和Expires

我的apache版本为2.4.10,配置如下,我设置了html文件的Cache-Control,以及Expires,同时禁用了Last-Modified响应头部和Etag。

FileETag none

Header set Cache-Control “max-age=3600”

ExpiresActive On

ExpiresByType text/html A20

Header unset Last-Modified

我的index.html文件如下:

测试浏览器缓存

测试文字

test.gif测试图片

这就设置了html文件响应加上cache-control响应头,如同下面这样:

Accept-Ranges:bytes

Cache-Control:max-age=3600

Connection:Keep-Alive

Content-Length:29

Content-Type:text/html

Date:Mon, 09 Mar 2015 14:17:20 GMT

Expires:Mon, 09 Mar 2015 14:18:20 GMT

Keep-Alive:timeout=5, max=100

Server:Apache/2.4.10 (Ubuntu)

那么可以看到响应头既有Cache-control又有Expires,而且这两个值我故意设置的不一样,这个时候以哪个值为准呢?在chrome下面实验结果表明Cache-control优先级要高,也就是如果使用期小于新鲜期3600秒,则在地址栏访问index.html页面的时候会直接从缓存中取。

注意这里chrome有个问题,就是如果在同一个tab下面访问index.html,不管有没有过期,都不会从缓存中取,而当你打开一个新的tab访问,则缓存机制生效,具体原因不明,可能跟chrome内部缓存策略有关。比如这里有人提出相同的问题。

2.2 Last-Modified/If-Modified-Since 和 Etag/If-None-Match

这几个标记可以配合Cache-Control使用。

– Last-Modified:标示响应文档的最后修改时间。

– If-Modified-Since(IMS):当文档过期时(比如使用期超过了Cache-Control指定的max-age),如果该响应文档有Last-Modified的响应头部,则会在请求时带上IMS头部,值为服务器文档的最后修改时间。

Etag:web服务器响应请求时,返回Etag头部用来告知浏览器该文档在服务器的唯一标示。apache中Etag是对文件的Inode,大小以及最后修改时间mtime进行hash后得到。

If-None-Match(INM):当文档过期时,浏览器请求会带上INM头部,内容为Etag值。web服务器会比对Etag值并决定返回304还是200.

对2.1中的配置注释掉FileTag none和

Header unset Last-Modified

即可开启Etag和Last-Modified响应头部。

如果在请求头部中IMS和INM都存在,服务器会优先验证INM,只有INM匹配成功后才会继续比对IMS。

2.3 既有IMS何生INM

根据《http权威指南》上面的描述,之所以存在IMS还要INM主要是有如下几个原因:

– 有些文档可能会被周期性重写,但是实际包含的数据常常是一样的。尽管内容没有变化,但是修改日期会发生变化。

– 有些文档可能被修改了,但是所做修改并不重要,不需要让世界范围的换成都重新装载数据。

– 有些服务器无法准确判断页面最后修改时间。

– 有些服务器提供的文档会在毫秒间发生变化,而这个对服务器以秒为粒度的修改日期就不够用了。

3.用户行为与缓存

用户行为也会影响浏览器缓存机制。比如你F5会导致Expires/Cache-control无效,用CTRL+F5(某些系统中是Shift+F5)除了Expires/Cache-control外,还会导致Etag/Last-Modified失效。

4.参考资料

浏览器缓存机制

《HTTP权威指南》

Is Chrome ignoring Control-Cache: max-age?

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/179531.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 为什么0xffffffff是-1?(计算机对整型的存储)[通俗易懂]

    为什么0xffffffff是-1?(计算机对整型的存储)[通俗易懂]一个数字在计算机中都是以二进制补码的形式存储的。先了解这句核心。。。我们认为中的int整型数值顺序java中int类型是4个字节,也就是32位,其中第一位是符号位,int数值的存储结构我们利用System.out.println(Integer.toBinaryString(Integer.MAX_VALUE));拿到int的最大值,是1111111111111111111111111111111,31个1,首位是0(代表正数,省略了)那我们给int的最大值+1,会发生什么呢?Sys

  • 开源库TinyXML2简介及使用

    开源库TinyXML2简介及使用TinyXML2是一个开源、简单、小巧、高效的C++XML解析器,它只有一个.h文件和一个.cpp文件组成,可以轻松集成到其它程序中。它解析XML文档并从中构建可以读取、修改和保存的文档对象模型(DocumentObjectModel,DOM)。它不能解析DTD(DocumentTypeDefinitions,文档类型定义)或XSL(eXtensibleStylesheetLan…

  • 安装 | MATLAB2018a (64位) 安装教程及安装包下载链接「建议收藏」

    安装 | MATLAB2018a (64位) 安装教程及安装包下载链接「建议收藏」博主github:https://github.com/MichaelBeechan博主CSDN:https://blog.csdn.net/u011344545安装包下载链接:内附MATLAB从入门到精通视频教程全17讲链接:https://pan.baidu.com/s/12NM-hWPhXg8mFhdoGbpv7A提取码:1i4x链接:https://pan.baidu…

  • jetbrains全家桶激活码 淘宝上卖的怎么来的【2021最新】

    (jetbrains全家桶激活码 淘宝上卖的怎么来的)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • python用turtle画夏日海边

    python用turtle画夏日海边

  • 安卓数据转移到iphone老是中断_安卓换iPhone数据怎么转移?这款神器一键搞定「建议收藏」

    安卓数据转移到iphone老是中断_安卓换iPhone数据怎么转移?这款神器一键搞定「建议收藏」每天12:18准时给大家惊喜!大家好!我是好奇仔,热衷于搜罗和分享各种好用、实用的软件神器和资源,有手机软件、办公软件、APP,还有网站资源……来自:PConline,作者:我爱我家换新手机了,内心当然是巨爽无比了!可是换机时有个步骤却让人觉得有点麻烦,那就是如何将旧手机的资料转移到新手机里去,安卓与iOS又如何互通呢?以前的操作得先将数据导出到电脑,然后可能还需要进行数据格式转换,接…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号