作家
登录

浅谈浏览器缓存机制

作者: 来源: 2017-04-26 15:03:55 阅读 我要评论

-Modified: Tue, 04 Apr 2017 10:01:15 GMT 

用于标记请求资本的最后一次修改时光, 格局为GMT(格林尼治标准时光). 如可用 new Date().toGMTString()获取当前GMT时光. Last-Modified 是 ETag 的fallback机制, 优先级比 ETag 低, 且只能精确到秒, 是以不太合适短时光内频繁修改的资本. 不仅如斯, 办事器端的静态资本, 平日须要编译打包, 可能出现资本内容没有改变, 而Last-Modified却改变的情况.

If-Modified-Since

语法同上, 如:

  1. If-Modified-Since: Tue, 04 Apr 2017 10:12:27 GMT 

缓存校验字段, 其值为前次响应头的Last-Modified值, 若与请求资本当前的Last-Modified值雷同, 那么将返回304状况码的响应, 反之, 将返回200状况码锾螃.

If-Unmodified-Since

缓存校验字段, 语法同上. 表示资本未修改则正常履行更新, 不然返回412(Precondition Failed)状况码的响应. 常用于如下两种场景:

  • 不安然的请求, 比如说应用post请求更新wiki文档, 文档未修改时才履行更新.
  • 与 If-Range 字段同时应用时, 可以用来包管新的片段请求来自一个未修改的文档.

强缓存

一旦资本射中强缓存, 浏览器便不会向办事器发送请求, 而是直接攫取缓存. Chrome下的现象是 200 OK (from disk cache) 或者 200 OK (from memory cache). 如下:

If-None-Match

如许做的好处就是你可以自由控制什么时刻加载最新的资本.

  

对于惯例请求, 只要存在该资本的缓存, 且Cache-Control:max-age 或者expires没有过时, 那么就能射中强缓存.

以上, ETag优先级比Last-Modified高, 同时存在时, 前者覆盖后者. 下面经由过程实例来懂得下强缓存和协商缓存.

如下忽视初次拜访, 第二次经由过程 If-Modified-Since 射中了304协商缓存.

协商缓存的响应结不雅, 不仅验证了资本的有效性, 同时还更新了浏览器缓存. 重要更新内容如下:

  1. Age:0 
  2.  
  3. Cache-Control:max-age=600 
  4.  
  5. Date: Wed, 05 Apr 2017 13:09:36 GMT 
  6.  
  7. Expires:Wed, 05 Apr 2017 00:55:35 GMT  

Age:0 表示射中了代劳办事器的缓存, age值为0表示代劳办事器方才刷新了一次缓存.

Cache-Control:max-age=600 覆盖 Expires 字段, 表示大年夜Date_value, 即 Wed, 05 Apr 2017 13:09:36 GMT 起, 10分钟之后缓存过时. 是以10分钟之内拜访, 将会射中强缓存, 如下所示:

 

当然, 除了上述与缓存直接相干的字段外, http header中还包含如下借居相干的字段.

Age

出现此字段, 表示射中代劳办事器的缓存. 它指的是代劳办事器对于请求资本的已缓存时光, 单位为秒. 如下:

  1. Age:2383321 
  2.  
  3. Date:Wed, 08 Mar 2017 16:12:42 GMT  

以上指的是, 代劳办事器在2017年3月8日16:12:42时向源办事器提议了对该资本的请求, 今朝已缓存了该资本2383321秒.

Date

指的是响应生成的时光. 请求经由代劳办事器时, 返回的Date未必是最新的, 平日这个时刻, 代劳办事器将增长一个Age字段告诉该资本已缓存了多久.

Vary

IE8的异常表示

对于办事器而言, 资本文件可能不指荷琐版本, 比如说紧缩和未紧缩, 针对不合的客户端, 平日须要返回不合的资本版本. 比如说老式的浏览器可能不支撑解紧缩, 这个时刻, 就须要返回一个未紧缩的版本; 对于新的浏览器, 支撑紧缩, 返回一个紧缩的版本, 有利于节俭带宽, 晋升体验. 那么怎么区分这个版本呢, 这个时刻就须要Vary了.

办事器经由过程指定Vary: Accept-Encoding, 告诉代劳办事器, 对于这个资本, 须要缓存两个版本: 紧缩和未紧缩. 如许老式浏览器和新的浏览器, 经由过程代劳, 就分别拿到了未紧缩和紧缩版本的资本, 避免了都拿同一个资本的难堪.

  1. Vary:Accept-Encoding,User-Agent 

如上设置, 代劳办事器将针对是否紧缩和浏览器类型两个维度去缓存资本. 如斯一来, 同一个url, 就能针对PC和Mobile返回不合的缓存内容.

怎么让浏览器不缓存静态资本

实际上, 工作中很多场景都须要避免浏览器缓存, 除了浏览器隐私模式, 请求时想要禁用缓存, 还可以设置请求头: Cache-Control: no-cache, no-store, must-revalidate .


  推荐阅读

  大数据在美国 零售商如何使用人工智能进行预测分析?

当我们为一个俄罗斯大年夜型零售连锁店开辟推荐体系时,我们采取协同过滤。 导语:在美国,人工智能中的猜测分析和推荐算法正在零售范畴发挥侧重要感化。本文是36大年夜数据记者张鲁翻译自>>>详细阅读


本文标题:浅谈浏览器缓存机制

地址:http://www.17bianji.com/lsqh/34978.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)