浏览器HTTP缓存策略
使用缓存是前端性能优化的重要方式,既可以提高响应的速度又可以减少不必要的重复请求,从而提高服务器的吞吐量。但是有时候缓存并不适用于所有情况,有时候反而会使用户体验变差,因此需要根据不同的请求制定不同的缓存策略。
什么是浏览器缓存
浏览器缓存就是浏览器把一个已经请求过的Web资源拷贝一份副本储存在本地磁盘中。当再次访问相同的URL时,浏览器会根据缓存机制决定是直接使用副本响应访问请求,还是向服务器再次发送请求。
缓存规则
在浏览器第一次发起请求时,本地无缓存,向web服务器发送请求,服务器起端响应请求,浏览器端缓存。
在第一次请求时,服务器会将页面最后修改时间通过Last-Modified标识由服务器发送给客户端,客户端记录修改时间;服务器还会生成一个Etag,并发送给客户端。当浏览器后续再次进行请求时则会首先获取该资源缓存的header信息,然后根据Cache-Control和expires来判断是否过期。若没过期则直接从缓存中获取资源信息,包括缓存的header的信息,所以此次请求不会与服务器进行通信。如果缓存过期,浏览器会向服务器发送请求,本次请求会带着第一次请求返回的有关缓存的header字段信息。
浏览器端的缓存规则是通过HTTP协议头和HTML页面的Meta标签来定义的,分为强制缓存和协商缓存两种。
使用HTML Meta 标签
为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过在HTML页面的节点中加入标签可以
<!-- 仅有IE才能识别这段meta标签含义,Pragma是http1.0版本中给客户端设定缓存方式之一,pragma与no-cache用于告诉浏览器当前页面不被缓存,但是页面上的资源则不受影响,而且浏览器将无法脱机浏览 -->
<meta http-equiv="Pragma" content="no-cache"> <!-- cache-control常见的取值有private、no-cache、max-age、must-revalidate等,默认为private -->
<meta http-equiv="cache-control" content="no-cache"><!-- Expires用于设置网页的过期时间,如果设置为0表示立即过期 -->
<meta http-equiv="expires" content="0">
使用HTTP消息报头
类型 | 消息包头 | 值/示例 | 作用 | 备注 |
---|---|---|---|---|
响应头 | Pragma | no-cache | 告诉浏览器忽略资源的缓存副本,每次访问都需要去服务器拉取 | http1.0中存在的字段,在http1.1中使用Cache-Control替代,为了做http协议的向下兼容,可保留这个字段 |
Expires | Mon, 15 Aug 2016 03:56:47 GMT | 启用缓存和定义缓存时间。告诉浏览器资源缓存过期时间,如果还没过该时间点则不发请求 | http1.0中存在的字段,该字段所定义的缓存时间是相对服务器上的时间而言的,如果客户端上的时间跟服务器上的时间不一致(特别是用户修改了自己电脑的系统时间),那缓存时间可能就没意义了。在HTTP 1.1版开始,使用Cache-Control: max-age=秒替代 | |
Cache-Control | no-cache | 缓存,但缓存立即失效,强制每次请求直接发送给服务器,拉取资源配合 ETag 使用。 | Cache-Control优先级高于Expires,并且Cache-Control指令可以组合使用 | |
no-store | 强制缓存在任何情况下都不要保留任何副本 | |||
max-age=[秒] | 指明缓存副本的有效时长,从请求时间开始到过期时间之间的秒数 | |||
public | 与private对立,任何路径的缓存者(本地缓存、代理服务器)都可以利用缓存 | |||
private | 缓存响应指令,表示只对当前的服务提供缓存服务,对于其他用户的请求,缓存服务器不会返回缓存 | |||
s-max-age = time | 仅在代理服务器中生效,覆盖 max-age 效果。只限于供多位用户使用的公共缓存服务器 | |||
max-stable = time | 在 time 时间内,即使缓存失效,也使用缓存。 | |||
min-fresh = time | 要求返回至少还没过指定时间的缓存 | |||
Last-Modified | Mon, 15 Aug 2016 03:56:47 GMT | 告诉浏览器这个资源最后的修改时间。服务器将资源传递给客户端时,会将资源最后更改的时间以“Last-Modified: GMT”的形式加在实体首部上一起返回给客户端 | 只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间 | |
ETag | “fd56273325a2114818df4f29a628226d” | 告诉浏览器当前资源在服务器的唯一标识符(生成规则由服务器决定) | Etag虽然能够更加准确的控制缓存,但是需要注意的是因为每台机器生成的etag都会不一样,分布式系统里多台机器间文件的last-modified必须保持一致,以免负载均衡到不同机器导致比对失败 | |
请求头 | If-Modified-Since | Mon, 15 Aug 2016 03:56:47 GMT | 其值为上次响应头的Last-Modified值,再次向web服务器请求时带上头If-Modified-Since。web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源被改动过,则响应整片资源内容(写在响应消息包体内),包括更新Last-Modified的值,HTTP 200;若最后修改时间较旧,说明资源无新修改,则响应HTTP 304(无需包体,节省浏览),告知浏览器继续使用所保存的cache | |
If-None-Match | “fd56273325a2114818df4f29a628226d” | 当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match(Etag的值)。web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对,决定返回200或304 |
强制缓存
强制缓存是利用http头中的Expires和Cache-Control两个字段来控制的,用来表示资源的缓存时间,强制缓存中,普通刷新会忽略它,但不会清除它,需要强制刷新。浏览器强制刷新,请求会带上Cache-Control:no-cache和Pragma:no-cache。
协商缓存
协商缓存是由服务器确定缓存资源是否可用。主要涉及到Last-Modified/If-Modified-Since和Etag/If-None-Match两组header字段,并且都需要配合Cache-Control使用。
Last-Modified和ETag可以一起使用,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified。
其他
用户的行为也会影响浏览器缓存行为,比如:用户操作、地址栏回车、页面链接跳转、新开窗口、前进、后退都会校验缓存,F5刷新会忽略强制缓存(重置max-age=0),Ctrl+F5刷新则强制不使用缓存(重置Cache-Control=no-cache,请求头丢弃Last-Modified/Etag选项)。
如果HTTP信息头中包含Cache-Control:no-cache,pragma:no-cache(HTTP1.0)、Cache-Control:max-age=0或既Last-Modified/Etag也不包含Cache-Control/Expires则请求无法被缓存,同时post请求也无法被缓存。
参考:https://www.cnblogs.com/slly/p/6732749.html
浏览器HTTP缓存策略相关推荐
- java cache-control_详解浏览器Cache-Control缓存策略
原来用的是 Expires 策略,浏览器可以直接从浏览器缓存读取数据,而无需再次请求,它的值对应一个 GMT,来告诉浏览器资源缓存过期时间,如果还没过该时间点则不发请求. 例如下面的例子,这是京东的首 ...
- 案例解读:深入理解浏览器的缓存机制
0 前言 浏览器缓存是前端性能优化的重要一环,对于前端效率提升的重要性,不言而喻. 之前对于浏览器缓存也是一知半解,这次借着H5页面缓存优化的东风整理了一下本地浏览器端的缓存机制,如强制缓存.协商缓存 ...
- 离线缓存占内存吗_彻底弄懂浏览器缓存策略
浏览器缓存策略对于前端开发同学来说不陌生,大家都有一定的了解,但如果没有系统的归纳总结,可能三言两语很难说明白,甚至说错,尤其在面试过程中感触颇深,很多候选人对这类基础知识竟然都是一知半解,说出几个概 ...
- 前端web:浏览器静态资源缓存策略
浏览器静态资源缓存策略 浏览器其实提供了两种控制策略,分别是强制缓存和协商缓存 强制缓存 强制缓存:就是强制使用浏览器缓存下来的资源; 在指定的一段时间内用自己缓存的文件就行,不需要再次发出请求. 具 ...
- 通过 Node.js 小示例学习浏览器缓存策略
单纯讲一些理论性的东西可能会很难理解,本文结合一些 Node.js 小示例来学习浏览器缓存策略. 在后端为了加速服务的访问速度,通常可以使用 Memcached.Redis 做数据缓存,那么在浏览器端 ...
- android缓存策略跟cdn,缓存学习(五)CDN缓存(下)-CDN缓存策略、CDN缓存和浏览器缓存之间的关系、回源和回源比...
CDN缓存策略 CDN(Content Delivery network,内容分发网络),通过GSLB技术使得用户能访问到最近物理机房的文件,以节省网络时间,也就是说一份文件可能会在全国乃至全球的多个 ...
- 浏览器缓存机制介绍与缓存策略剖析
缓存可以减少网络 IO 消耗,提高访问速度.浏览器缓存是一种操作简单.效果显著的前端性能优化手段.对于这个操作的必要性,Chrome 官方给出的解释似乎更有说服力一些: 通过网络获取内容既速度缓慢又开 ...
- 浏览器缓存和vue-cli缓存策略
缓存的分类: HTTP缓存根据缓存的节点,分为私有缓存和共享缓存. 私有缓存是绑定到特定客户端的缓存--通常是浏览器缓存.由于存储的响应不与其他客户端共享,因此私有缓存可以存储该用户的个性化响应. 共 ...
- js 单页面ajax缓存策略,浅谈ajax的缓存机制---IE浏览器方面
这篇文章主要介绍了IE浏览器关于ajax的缓存机制,文中给大家提到了Ajax解决浏览器的缓存问题,解决方法有很多种.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. IE浏览器对于同一 ...
最新文章
- 我的hadoop学习之路
- java单元测试覆盖率统计eclemma
- Zxing 竖屏切换 android
- os.path.dirname( __ file __ ) 2018/6/2
- Flutter 中 stateless 和 stateful widget 的区别[Flutter专题60]
- 微信公众号 Spring Cloud 相关文章链接备份(纯技术)
- 爱摸鱼的Dillonh
- python中counter_Python collections模块中counter()的详细说明,Pythoncollections,之,Counter,详解...
- 环保公益PSD分层海报,小景合成美好世界
- 用故事来给你讲负载均衡的原理
- 转 五种提高 SQL 性能的方法
- UVA10394 Twin Primes【孪生素数】
- 迅雷 应版权方要求,文件无法下载 解决方法
- 1960-2019年世界各国人均GDP增长率
- 【Python】Jupyter Notebook介绍、安装及使用教程
- 最优秀的六种造字方法
- <textarea></textarea> placeholder属性不显示
- 基于STM32的智能小车方案设计
- (POJ - 2251)Dungeon Master(bfs)
- CSS - 盒子模型 - 外边距
热门文章
- 投石问路,Hitachi Vantara与Commvault“向下看”
- progressDialog显示延时
- python 根据经纬度 调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...
- 该内容尚未提供权利证明,无法提供下载。
- VC++编译错误(无法打开源数据文件platform.winmd)
- 上线即碾压Github榜首!十大互联网Docker实战案例手册(大厂版)
- 主机屋终生版本服务器,是否值得
- 基于SPSS的中国消费者信心指数影响因素分析-----相关性分析
- 过程控制系统与仪表 华南理工大学期末重点 王再英(第二版) 长篇思维导图
- 论文解读--Automatic Portrait Segmentation for Image Stylization