浏览器会不会缓存html,浏览器缓存机制(一)
浏览器缓存机制之一(经典缓存)
因为在接手的项目中用到过比较新的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文件如下:
测试浏览器缓存
测试文字
测试图片
这就设置了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?
浏览器会不会缓存html,浏览器缓存机制(一)相关推荐
- 浏览器缓存和webpack缓存配置
网络请求会耗费大量时间和请求,如果可以重用为改变的网络资源,对于用户来说可以更快更流畅的查看网页,对于服务器来说减少了很多负荷,所以浏览器缓存是前端优化的重要内容.本文介绍了浏览器缓存的机制和缓存在w ...
- 浏览器缓存:强缓存和协商缓存
1. 强缓存,不向服务器发请求,直接从本地硬盘(from disk cache/from memory cache)或者内存中获取 2.协商缓存,向服务器发出验证,如果资源无更改,不重新返回资源内容, ...
- 缓存(CDN缓存,浏览器(客户端)缓存)
1.什么是缓存? 缓存是一种数据结构,用于快速查找以及执行的操作结果.因此,如果一个操作执行起来很慢,对于常用的输入数据就可以将操作的结果缓存,并在下次调用该操作时使用缓存的数据. 缓存是一个到处都存 ...
- IE针对Ajax请求结果的缓存IE浏览器同一个请求第二次是缓存数据不刷新
IE针对Ajax请求结果的缓存IE浏览器同一个请求第二次是缓存数据不刷新 IE针对Ajax请求结果的缓存/ IE浏览器同一个请求第二次是缓存 一.在AJAX请求的属性上直接设置cache functi ...
- firefox火狐浏览器怎么清除缓存 火狐浏览器清理cookie教程
使用火狐浏览器的小伙伴是不是会出现网页搜索速度慢之类的问题呢,其实这是网页缓存太多的缘故.接下来,就让小编为大家说一下firefox(火狐浏览器)如何清除缓存的方法吧. 1.打开火狐浏览器,点击浏览器 ...
- h5离线缓存与浏览器缓存的区别
离线缓存允许我们在没网的时候通过读取离线文件进行站点的访问,而浏览器缓存即使浏览器又对资源文件的缓存也必须在有网的情况下读取缓存文件以提高文件加载速度,没网的时候依然显示网络断开的错误. 转载于:ht ...
- 浏览器缓存机制,强缓存,弱缓存
目录 web缓存类型 浏览器缓存规则: 浏览器缓存的控制 cache-control总结 Expires Last-modified & If-modified-since Etag & ...
- 如何清除360网站服务器缓存,360安全浏览器怎样清除缓存360浏览器缓存清理
<360安全浏览器怎样清除缓存360浏览器缓存清理>由会员分享,可在线阅读,更多相关<360安全浏览器怎样清除缓存360浏览器缓存清理(8页珍藏版)>请在人人文库网上搜索. 1 ...
- 除了缓存,浏览器还有哪些存储数据的方式?
一.简介 浏览器提供3种用于数据存储的 JavaScript APIs:cookie .Web Storage API.IndexedDB. 二.cookie cookie 是最早期 用于存储 键/值 ...
- php微信网页不缓存,微信浏览器取消缓存的方法
这篇文章主要介绍了微信浏览器取消缓存的方法,本文使用meta头信息实现取消了微信浏览器的缓存,特别是在开发时会经常用到,需要的朋友可以参考下. 做微信公众号和调试手机页面的时候,避免不了页面要跳转到微 ...
最新文章
- 初识 Spring(02)---(IOC)
- html相对路径载入页面,html页面的绝对路径和相对路径
- Linux实现后台运行程序及查看nohup jobs
- 只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局
- 汉军Hundre考勤数据库数据表分析总结
- 细数25个硅谷最热创业公司 寻找创业灵感
- LeetCode 935. 骑士拨号器(动态规划)
- 自定义taglib引入失败_小程序拼团总失败?看看微信官方和开发者们怎么说
- Python操作MySQL的封装类
- C语言排序方法-----二元选择排序法
- 1.mongoDB 简介
- sscom串口调试助手
- 在PSP上玩《大旋风 Twin Hawk》
- 用计算机用图解法求理论塔板数,简洁法计算理论板数工具
- 音频(一)时域图、 频谱图 Spectrum
- springboot文件上传大小限制:The field file exceeds its maximum permitted size of 1048576 bytes
- iPhonexr安兔兔html5测试,iPhone XR安兔兔跑分多少 苹果iPhone Xr安兔兔跑分公布
- 工作日志之Sonar扫描错误处理-Sonar扫描结果入库 java.sql.BatchUpdateException: Incorrect string value: '\xF3\xA3\xAC\xB
- 怎样用JS实现关闭当前窗口
- HTML 导航栏标签切换
热门文章
- 阿龙的学习笔记---计算机网络知识点总结---三、数据链路层
- java matcher group方法_Java中正则表达式相关类中Matcher.group()方法
- 配色那么差,还不‘哥屋恩’去看电影!
- 运用Chrome浏览器ADB插件获取页面元素
- 大数据中的物联网运用
- 远程桌面会话主机服务器配置工具,远程桌面会话主机服务器上的资源
- 火狐浏览器不能添加和修改书签
- 【找出耗电大户进行消灭 电池持久有绝招】
- java类嵌套_java-嵌套类
- [无私分享]最新网盘资源搜索站点