精华内容
下载资源
问答
  • 强缓存弱缓存

    2019-02-22 12:27:39
    强缓存弱缓存 www.cnblogs.com/iceflorence…
    展开全文
  • 目录web缓存类型浏览器缓存规则:浏览器缓存的控制cache-control总结ExpiresLast-modified & If-modified-sinceEtag & & If-None-Match浏览器缓存流程为什么要有etag?哪些请求不能被缓存?用户操作行为...

    web缓存类型

    1. 数据库数据缓存
    2. 服务器端缓存
    3. 浏览器端缓存
    4. web应用层缓存

    下面着重关注一下浏览器缓存

    浏览器缓存规则:

    1. 新鲜度(过期机制):也就是缓存副本有效期。一个缓存副本必须满足以下任一条件,浏览器会认为它是有效的,足够新的,而直接从缓存中获取副本并渲染:
    • 含有完整的过期时间控制头信息(HTTP协议报头),并且仍在有效期内
    • 浏览器已经使用过这个缓存副本,并且在一个会话中已经检查过新鲜度
    1. 校验值(验证机制):服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag),它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配,说明资源已经被修改或过期,浏览器需求重新获取资源内容。

    浏览器缓存的控制

    1. 使用HTML的 Meta 标签
      <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    2. 使用缓存有关的HTTP消息报头
      在这里插入图片描述

    cache-control总结

    1. cache-control: max-age
      max-age(单位为s)指定设置缓存最大的有效时间,定义的是时间长短。当浏览器向服务器发送请求后,在max-age这段时间里浏览器就不会再向服务器发送请求了。我们来找个资源看下。比如QQ推广上的css资源,max-age=3600,也就是说缓存有效期为3600秒(也就是1h)。于是在1天内都会使用这个版本的资源,即使服务器上的资源发生了变化,浏览器也不会得到通知。

    2. cache-control: max-age=xxxx,public
      客户端和代理服务器都可以缓存该资源;
      客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,如果用户做了刷新操作,就向服务器发起http请求

    3. cache-control: max-age=xxxx,private
      只让客户端可以缓存该资源;代理服务器不缓存
      客户端在xxx秒内直接读取缓存,statu code:200

    4. cache-control: max-age=xxxx,immutable
      客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,即使用户做了刷新操作,也不向服务器发起http请求

    5. cache-control: no-cache
      跳过设置强缓存,但是不妨碍设置协商缓存;一般如果你做了强缓存,只有在强缓存失效了才走协商缓存的,设置了no-cache就不会走强缓存了,每次请求都回询问服务端。

    6. cache-control: no-store
      不缓存,这个会让客户端、服务器都不缓存,也就没有所谓的强缓存、协商缓存了。

    Expires

    缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是说, Expires=max-age + 请求时间 ,需要和Last-modified结合使用。但cache-control的优先级更高。Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。

    Last-modified & If-modified-since

    服务器端文件的最后修改时间,需要和cache-control共同使用,是检查服务器端资源是否更新的一种方式。当浏览器再次进行请求时,会向服务器传送If-Modified-Since报头,询问Last-Modified时间点之后资源是否被修改过。如果没有修改,则返回码为304,使用缓存;如果修改过,则再次去服务器请求资源,返回码和首次请求相同为200,资源为服务器最新资源。

    Etag & & If-None-Match

    根据实体内容生成一段hash字符串,标识资源的状态,由服务端产生。浏览器会将这串字符串传回服务器,验证资源是否已经修改,如果没有修改,则返回304

    浏览器缓存流程

    在这里插入图片描述

    为什么要有etag?

    你可能会觉得使用 Last-Modified 已经足以让浏览器知道本地的缓存副本是否足够新,为什么还需要 Etag(实体标识)呢?HTTP1.1中Etag的出现主要是为了解决几个 Last-Modified 比较难解决的问题:

    • Last-Modified 标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的新鲜度

    • 如果某些文件会被定期生成,当有时内容并没有任何变化,但 Last-Modified 却改变了,导致文件没法使用缓存

    • 有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形

    Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304。

    哪些请求不能被缓存?

    无法被浏览器缓存的请求:

    1. HTTP信息头中包含Cache-Control:no-cache,pragma:no-cache,或Cache-Control:max-age=0等告诉浏览器不用缓存的请求
    2. 需要根据Cookie,认证信息等决定输入内容的动态请求是不能被缓存的
    3. 经过HTTPS安全加密的请求(有人也经过测试发现,ie其实在头部加入Cache-Control:max-age信息,firefox在头部加入Cache-Control:Public之后,能够对HTTPS的资源进行缓存,参考《HTTPS的七个误解》)
    4. POST请求无法被缓存
    5. HTTP响应头中不包含Last-Modified/Etag,也不包含Cache-Control/Expires的请求无法被缓存

    用户操作行为与缓存的关系

    在这里插入图片描述

    • 普通刷新 – 当按下F5或者点击刷新按钮来刷新页面的时候,浏览器将绕过本地缓存来发送请求到服务器, 此时, 协商缓存是有效的
    • 强制刷新 – 当按下ctrl+F5来刷新页面的时候, 浏览器将绕过各种缓存(本地缓存和协商缓存), 直接让服务器返回最新的资源
    • 回车或转向 – 当在地址栏上输入回车或者按下跳转按钮的时候, 所有缓存都生效

    HTTP状态码及区别

    状态 类型 说明
    200 form memory cache 不请求网络资源,资源在内存当中,一般脚本、字体、图片会存在内存当中
    200 form disk cache 不请求网络资源,在磁盘当中,一般非脚本会存在内存当中,如css等
    200 资源大小数值 从服务器下载最新资源
    304 报文大小 请求服务端发现资源没更新,使用本地资源
    展开全文
  • 这就涉及到了强缓存弱缓存这两位兄弟喽 1.首先看看强缓存弱缓存是怎么来的 **强缓存: **在http协议请求头中设置Expires或者Cache-Control cache-control: max-age=3600 Expires是用来设置缓存过期时间,cache-...

    经常开发大哥改完bug,重新部署测试环境后,我这个菜鸟测试都会刷新下页面,但是发现有时候bug并没有修复,这个时候开发大哥就会让我清下缓存。那么问题就来了:刷新页面没有清缓存嘛?
    这就涉及到了强缓存和弱缓存这两位兄弟喽
    1.首先看看强缓存和弱缓存是怎么来的
    **强缓存:
    **在http协议请求头中设置Expires或者Cache-Control

    cache-control: max-age=3600
    

    Expires是用来设置缓存过期时间,cache-control的参数可以设置缓存的过期时间等。

    若浏览器发起请求的时候,缓存没有过期,则会直接读取本地缓存

    弱缓存:
    若未命中强缓存,则会向服务器发起请求:服务器判断页面有没有更新,若没有则会返回304,浏览器去读取本地缓存

    2.在读取缓存的时候状态码后面会跟(from memory cache)或者(from disk cache)
    (from memory cache):从内存中读取缓存
    (from disk cache):从硬盘中读取缓存

    至于缓存是存储在哪里这是由后端或者是在nginx等容器或者中间件服务中设置的
    3.回答我一开始的问题:刷新页面没有清缓存嘛?
    刷新页面是清除的强缓存,但是弱缓存并没有清除。

    展开全文
  • 浏览器的强缓存弱缓存

    千次阅读 2018-06-11 16:37:15
    在浏览器众多缓存中的HTTP缓存可能很多人对这个的概念并没有很清晰,每个人都知道进入一次网页之后再刷新一次页面,加载速度会比首次加载快非常多,每个人都知道这是浏览器缓存的magic,但是对此背后的原因可能不甚...
        

    在浏览器众多缓存中的HTTP缓存可能很多人对这个的概念并没有很清晰,每个人都知道进入一次网页之后再刷新一次页面,加载速度会比首次加载快非常多,每个人都知道这是浏览器缓存的magic,但是对此背后的原因可能不甚了解...

    当我们在谈论HTTP缓存时我们在谈论什么:

    我们实际上是在谈论下面这两种情况:

    如上图,浏览器对静态资源的HTTP缓存有两种情况,一种是强缓存(本地缓存),另一种是弱缓存(协商缓存)。


    缓存流程:

    浏览器第一次请求资源时:

    图片出自网络

    浏览器第一次请求资源时,必须下载所有的资源,然后根据响应的header内容来决定,如何缓存资源。可能采用的是强缓存,也可能是弱缓存

    浏览器后续请求资源时的匹配流程:

    由上图可以知道当浏览器请求一个静态资源时的HTTP流程:

    1. 强缓存阶段:先在本地查找该资源,如果发现该资源,并且其他限制也没有问题(比如:缓存有效时间),就命中强缓存,返回200,直接使用强缓存,并且不会发送请求到服务器
    2. 弱缓存阶段:在本地缓存中找到该资源,发送一个http请求到服务器,服务器判断这个资源没有被改动过,则返回304,让浏览器使用该资源。
    3. 缓存失败阶段(重新请求):当服务器发现该资源被修改过,或者在本地没有找到该缓存资源,服务器则返回该资源的数据。

    强缓存与弱缓存的区别:

    获取资源形式: 都是从缓存中获取资源的。

    状态码: 强缓存返回200(from cache),弱缓存返回304状态码

    请求(最大区别)

    强缓存不发送请求,直接从缓存中取。

    弱缓存需要发送一个请求,验证这个文件是否可以使用(有没有被改动过)。


    强缓存:

    强缓存是利用Expires或者Cache-Control,让原始服务器为文件设置一个过期时间,在多长时间内可以将这些内容视为最新的。

    若时间未过期,则命中强缓存,使用缓存文件不发送请求。

    Cache-Control

    Cache-Control 是http1.1中为了弥补Expires的缺陷而加入的,当Expires和Cache-Control同时存在时,Cache-Control优先级高于Expires。

    选项

    可缓存性:

    public: 服务器端和浏览器端都能缓存

    private: 只能浏览器端缓存

    no-cache: 强制浏览器在使用cache拷贝之前先提交一个http请求到源服务器进行确认。http请求没有减少,会减少一个响应体(文件内容),这种个选项类似弱缓存。

    only-if-cached: 表明客户端只接受已缓存的响应,并且不要向原始服务器检查是否有更新的拷贝。

    到期设置:

    max-age=60:设置缓存存储的最大周期,超过这个时间缓存被认为过期(单位秒)。 这里是60秒

    其他设置:

    no-store: 不缓存,使用协商缓存

    must-revalidate: 缓存必须在使用之前验证旧资源的状态,并且不可使用过期资源。

    更多设置,移动MDN

    // 示例
    Cache-Control: no-cache, no-store, must-revalidate
    Cache-Control:public, max-age=31536000
    Cache-Control: max-age=3600, must-revalidate

    http1.0时代的缓存 Expires+Pragma

    Expires用于设置缓存到期时间

    指定缓存到期GMT的绝对时间,如果设了max-age,max-age就会覆盖expires,如果expires到期需要重新请求。

    Expires:Sat, 09 Jun 2018 08:13:56 GMT

    有一个问题是由于使用具体时间,如果时间表示出错或者没有转换到正确的时区都可能造成缓存生命周期出错。

    Pragma禁用缓存:

    Pragma : no-cache 表示防止客户端缓存,需要强制从服务器获取最新的数据;

    Pragma : no-cache  //只有这一个用法 禁用缓存,强制从服务器获取最新的数据; 

    强缓存命中 from memory cache & from disk cache

    在测试的时候,看到命中强缓存时,有两种状态,200 (from memory cache) cache & 200 (from disk cache),于是去找了一下这两者的区别:

    memory cache: 将资源存到内存中,从内存中获取。

    disk cache:将资源缓存到磁盘中,从磁盘中获取。

    二者最大的区别在于:当退出进程时,内存中的数据会被清空,而磁盘的数据不会

    更详细的介绍推荐这篇文章


    弱缓存:

    如果强缓存时间过期,或者没有设置,导致未命中的话。就进入到了弱缓存的阶段了,

    Last-Modified & if-modified-since:

    Last-Modified与If-Modified-Since是一对报文头,属于http 1.0。

    last-modified是web服务器认为文件的最后修改时间,last-modified是第一次请求文件的时候,服务器返回的一个属性。

    Last-Modified: Sat, 09 Jun 2018 08:13:56 GMT 

    第二次请求这个文件时,浏览器把If-Modified-Since发送给服务器,询问该时间之后文件是否被修改过。

    If-Modified-Since: Sat, 09 Jun 2018 08:13:56 GMT // 跟Last-Modified的值一样

    ETag & If-None-Match

    ETag与If-None-Match是一对报文,属于http 1.1。

    ETag是一个文件的唯一标志符。就像一个哈希或者指纹,每个文件都有一个单独的标志,只要这个文件发生了改变,这个标志就会发生变化。

    ETag机制类似于乐观锁机制,如果请求报文的ETag与服务器的不一致,则表示该资源已经被修改过来,需要发最新的内容给浏览器。

    ETag也是首次请求的时候,服务器返回的:

    ETag: "8F759D4F67D66A7244638AD249675BE2" // 长这样

    If-None-Match也是浏览器发送到服务器验证,文件是否改变的:

    If-None-Match: "8F759D4F67D66A7244638AD249675BE2" // 跟ETag的值一样

    Etag/lastModified过程如下:

    1. 客户端第一次向服务器发起请求,服务器将附加Last-Modified/ETag到所提供的资源上去
    2. 当再一次请求资源,如果没有命中强缓存,在执行在验证时,将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器
    3. 服务器检查该Last-Modified或ETag,并判断出该资源页面自上次客户端请求之后还未被修改,返回响应304和一个空的响应体

    同时使用两个报文头:

    同时使用这两个报文头,两个都匹配才会命中弱缓存,否则将重新请求资源。

    Etag 主要为了解决 Last-Modified 无法解决的一些问题:

    1. 一些文件也许内容并不改变(仅仅改变的修改时间),这个时候我们不希望文件重新加载。(Etag值会触发缓存,Last-Modified不会触发)
    2. If-Modified-Since能检查到的粒度是秒级的,当修改非常频繁时,Last-Modified会触发缓存,而Etag的值不会触发,重新加载。
    3. 某些服务器不能精确的得到文件的最后修改时间。

    用户操作行为与缓存

    F5刷新导致强缓存失效。

    ctrl+F5强制刷新页面强缓存,弱缓存都会失效。

    图片出自网络

    如何设置?

    一般是服务器端设置这些请求头的,我自己试了用阿里云服务器设置Cache-Control,设置一下很方便的。


    小结

    通过网络重复请求资源既缓慢,成本又高,缓存和重用以前获取的资源的能力成为优化性能很关键的一个方面,也是大厂面试时很频繁出现的内容,掌握好这块知识点是非常重要的,希望本文能给你带来些收获。

    文章如有不正确的地方欢迎各位路过的大佬鞭策!喜欢的话,赶紧点波订阅关注/喜欢。

    鼓励我一下:

    觉得还不错的话,给我的项目点个star

    展开全文
  • cache 强缓存弱缓存区别

    千次阅读 2019-03-08 09:04:27
    Web缓存可以保存常见文档副本,当发起Web请求时,如果本地有 “已缓存的&quot; 的副本,就可以直接从本地存储中提取这个文档,而不是去从原始服务器中拿。 减少冗余数据传输 当很多客户端访问原始服务器页面时...
  • 浏览器缓存的优点 浏览器将用户最近请求过的文档存储在本地磁盘,当用户再次访问时直接在本地加载,这样可以减少服务器的压力,加快用户访问网页的加载速度,提升用户体验。 浏览器缓存的过程 第一次请求: 首次...
  • 如果对缓存机制不了解,可以根据后面的一些详细介绍做一个系统理解浏览器缓存主要分为强缓存(本地缓存)和协商缓存(弱缓存)如上图,在浏览器第一次发送请求后,需要再次发送请求时,浏览器会首先获取该资源缓存的...
  • 浏览器缓存主要分为强缓存(本地缓存)和协商缓存(弱缓存) 如上图,在浏览器第一次发送请求后,需要再次发送请求时,浏览器会首先获取该资源缓存的header信息,然后根据Cache-Control和expires来判断是否过期。若...
  • 图片的三级缓存就是网络缓存、本地缓存、内存缓存,网络缓存没什么说的就是直接加载网络的图片,本地缓存就是将网络的资源缓存在手机磁盘上,内存缓存是临时缓存需要释放的不然就oom了。缓存策略:首次加载的时候...
  • 这四种级别由高到低依次为:引用、软引用、引用和虚引用。   下图为对象层次的引用     2、引用  平时我们编程的时候例如:Object object=new Object();那object就是一个引用...
  • 使用缓存就是为了提高性能,如果要求缓存喝数据库的数据是一致的,那么就违背了使用缓存的初衷了,所以建议数据库和缓存数据只需要保持一致性。
  • 引用是用等号来表示,系统不会因为内存不够而对引用进行回收;  软引用可以形象成一个用来装对象的袋子,而这个袋子里的东西在oom之前会被清空;  引用和软引用概念一样,只是袋子里的东西是在系统调用GC...
  • 本文介绍对象的、软、和虚引用的概念、应用及其在UML中的表示。 1.对象的、软、和虚引用  在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象。也就是说,只有对象处于...
  • 1.Java对象的、软、和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象。也就是说,只有对象处于可触及(reachable)状态,程序才能使用它。这 就像在日常生活中,...
  • 软,引用做缓存

    2018-12-24 18:03:34
    新生的引用对象本来是不会被GC的,但如果把它放进一个引里面,GC的时候他就会被GC。
  • 在java中引用的类型一共有四种,分别是:引用,软引用,引用和虚引用。 那么他们各自的定义是什么呢? 1.引用(StrongReference): 引用是使用最普通的应用。如果一个对象具有引用,那么gc绝不会回收...
  • http缓存

    2018-04-04 09:00:43
    强缓存弱缓存 缓存可以简单的划分成两种类型:强缓存(200 from cache)与协商缓存(304) 区别简述如下: 强缓存(200 from cache)时,浏览器如果判断本地缓存未过期,就直接使用,无需发起http请求 协商缓存...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 566
精华内容 226
关键字:

强缓存弱缓存