精华内容
下载资源
问答
  • http强缓存与协商缓存

    2021-02-20 13:28:49
    浏览器加载资源时先看是否命中强缓存,若命中则不会发送http请求直接使用本地资源 若未命中则发送http请求,看是否命中强缓存,若命中则不返回资源,使用本地资源,此时相应的状态码为304 若未命中强缓存则返回资源...

    前提知识

    • 浏览器加载资源时先看是否命中强缓存,若命中则不会发送http请求直接使用本地资源
    • 若未命中则发送http请求,看是否命中强缓存,若命中则不返回资源,使用本地资源,此时相应的状态码为304
    • 若未命中强缓存则返回资源,此时相应状态码为200

    强缓存:

    • expire:GMT格式 (过期日期) http1.0

    • cache-control: http1.1
      — max-age=时间戳 (保质期)

      expire和cache-control同时存在时,cache-control优先级更高

    协商缓存:

    (1)http1.0

    • last-modified: GMT格式 在响应头中,只精确到秒
    • if-modified-since: GMT格式 在请求头中,(值和last-modified完全一样)

    (2)http1.1

    • Etag : 一个唯一标志 在响应头中
    • if-none-match 一个唯一标志 在请求头中

    (2)组能解决(1)解决不了的问题:

    1. 当服务器一些文件丢失后恢复,但文件完全没有修改,此时可以用缓存,但对于last-modified,最后修改时间已变,无法命中缓存;而Etag不会改变,可以命中缓存
    2. last-modified只能精确到秒,而etag文件一修改就会变化, 不会命中缓存,能得到最新数据。
    展开全文
  • 缓存这东西,第一次必须获取到资源后,然后根据返回的信息来告诉如何缓存资源,可能采用的是强缓存,也可能告诉客户端浏览器是协商缓存,这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是...

    1、浏览器缓存

    缓存这东西,第一次必须获取到资源后,然后根据返回的信息来告诉如何缓存资源,可能采用的是强缓存,也可能告诉客户端浏览器是协商缓存,这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的,让大家有个大概的认知。

    浏览器第一次请求时:

    浏览器后续在进行请求时:

     

     从上图可以知道,浏览器缓存包含两种类型,即强缓存(也叫本地缓存)和协商缓存,浏览器在第一次请求发生后,再次请求时:

    • 浏览器在请求某一资源时,会先获取该资源缓存的header信息,判断是否命中强缓存(cache-control和expires信息),若命中直接从缓存中获取资源信息,包括缓存header信息;本次请求根本就不会与服务器进行通信;在firebug下可以查看某个具有强缓存资源返回的信息,例如本地firebug查看的一个强缓存js文件


       
    • 如果没有命中强缓存,浏览器会发送请求到服务器,请求会携带第一次请求返回的有关缓存的header字段信息(Last-Modified/If-Modified-Since和Etag/If-None-Match),由服务器根据请求中的相关header信息来比对结果是否协商缓存命中;若命中,则服务器返回新的响应header信息更新缓存中的对应header信息,但是并不返回资源内容,它会告知浏览器可以直接从缓存获取;否则返回最新的资源内容

    强缓存与协商缓存的区别,可以用下表来进行描述:

      获取资源形式 状态码 发送请求到服务器
    强缓存  从缓存取  200(from cache) 否,直接从缓存取
    协商缓存  从缓存取  304(not modified) 是,正如其名,通过服务器来告知缓存是否可用

     

    2、强缓存相关的header字段

    强缓存上面已经介绍了,直接从缓存中获取资源而不经过服务器;与强缓存相关的header字段有两个:

    1. expires,这是http1.0时的规范;它的值为一个绝对时间的GMT格式的时间字符串,如Mon, 10 Jun 2015 21:31:12 GMT,如果发送请求的时间在expires之前,那么本地缓存始终有效,否则就会发送请求到服务器来获取资源
       
    2. cache-control:max-age=number,这是http1.1时出现的header信息,主要是利用该字段的max-age值来进行判断,它是一个相对值;资源第一次的请求时间和Cache-Control设定的有效期,计算出一个资源过期时间,再拿这个过期时间跟当前的请求时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行;cache-control除了该字段外,还有下面几个比较常用的设置值:
       
      • no-cache:不使用本地缓存。需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在ETag,那么请求的时候会与服务端验证,如果资源未被更改,则可以避免重新下载。
         
      • no-store:直接禁止游览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源。
         
      • public:可以被所有的用户缓存,包括终端用户和CDN等中间代理服务器。
         
      • private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存。

      注意:如果cache-control与expires同时存在的话,cache-control的优先级高于expires

    3、协商缓存相关的header字段

    协商缓存都是由服务器来确定缓存资源是否可用的,所以客户端与服务器端要通过某种标识来进行通信,从而让服务器判断请求资源是否可以缓存访问,这主要涉及到下面两组header字段,这两组搭档都是成对出现的,即第一次请求的响应头带上某个字段(Last-Modified或者Etag),则后续请求则会带上对应的请求字段(If-Modified-Since或者If-None-Match),若响应头没有Last-Modified或者Etag字段,则请求头也不会有对应的字段

    1. Last-Modified/If-Modified-Since
      二者的值都是GMT格式的时间字符串,具体过程:
        • 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Last-Modified的header,这个header表示这个资源在服务器上的最后修改时间
           
        • 浏览器再次跟服务器请求这个资源时,在request的header上加上If-Modified-Since的header,这个header的值就是上一次请求时返回的Last-Modified的值
           
        • 服务器再次收到资源请求时,根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。当服务器返回304 Not Modified的响应时,response header中不会再添加Last-Modified的header,因为既然资源没有变化,那么Last-Modified也就不会改变,这是服务器返回304时的response header
           
        • 浏览器收到304的响应后,就会从缓存中加载资源
           
        • 如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modified的Header在重新加载的时候会被更新,下次请求时,If-Modified-Since会启用上次返回的Last-Modified值
           
    2. Etag/If-None-Match
      这两个值是由服务器生成的每个资源的唯一标识字符串,只要资源有变化就这个值就会改变;其判断过程与Last-Modified/If-Modified-Since类似,与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化。
       

     4、既生Last-Modified何生Etag

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

    • 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;

    • 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

    • 某些服务器不能精确的得到文件的最后修改时间。

    这时,利用Etag能够更加准确的控制缓存,因为Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。

    Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304

    5、用户的行为对缓存的影响

    盗用网上的一张图,基本能描述用户行为对缓存的影响

    6、强缓存如何重新加载缓存缓存过的资源

    上面说到,使用强缓存时,浏览器不会发送请求到服务端,根据设置的缓存时间浏览器一直从缓存中获取资源,在这期间若资源产生了变化,浏览器就在缓存期内就一直得不到最新的资源,那么如何防止这种事情发生呢?

    通过更新页面中引用的资源路径,让浏览器主动放弃缓存,加载新资源。

    类似下图所示:

    这样每次文件改变后就会生成新的query值,这样query值不同,也就是页面引用的资源路径不同了,之前缓存过的资源就被浏览器忽略了,因为资源请求的路径变了。

     

    文章转载自http://www.cnblogs.com/wonyun/p/5524617.html

     

    展开全文
  • 在前端性能优化中就需要用到强缓存以及协商缓存来减少资源的请求以及流量的消耗 本篇文章只讲理念,之后有时间再说一下强缓存和协商缓存的实践 首先当我们打开页面时就会加载资源(css,js,img),然后浏览器就...

    在前端性能优化中就需要用到强缓存以及协商缓存来减少资源的请求以及流量的消耗

     

    本篇文章只讲理念,之后有时间再说一下强缓存和协商缓存的实践

     

    首先当我们打开页面时就会加载资源(css,js,img),然后浏览器就会缓存这些资源文件,而强缓存就是设置资源的响应头里面的过期时间为几个月或者几年(这个响应头是需要服务端的同学配合设置的)

    比如我随意打开一个网站的资源,查看它的响应头,可以看到这里设置了expires  2020年才过期

    这样,浏览器第一次的时候会向服务端请求资源,然后把资源缓存,之后如果再加载到相同的资源文件,就不会再向服务端发起请求,而是从缓存里面找文件,直到文件的缓存时间过期 或者Ctrl+F5强制刷新页面才会向服务器请求

    应用场景

    比如你网站的图片已经确定十几年都不会变化,那么就可以设置它的过期时间久一点,这样就减少了http请求。

     

    协商缓存

    就是指每次请求资源的时候先与服务端进行验证,判断文件有没有被修改过,如果修改过,就从服务端获取修改后的,最新的资源文件

    如果没有修改过,那么就从缓存中读取文件

    如图,last-modified表示的就是文件的最近修改时间

    在nginx 中设置

    add_header Cache-Control no-cache;

    即可让资源文件使用协商缓存

     

    总而言之,强缓存就是设置一个时间,浏览器在该时间内的资源访问都不会再向服务端发起请求,而是使用缓存中的资源文件

    协商缓存则是每次请求资源都向服务端协商,询问服务端文件是否被修改,有改则改,没有改动就用缓存文件

     

     

    展开全文
  • http强缓存、协议缓存

    2021-03-24 10:18:14
    强缓存: 协商缓存: http1.0 http1.1 cache-control private:客户端可以缓存 public:客户端和代理服务器均可缓存; max-age=xxx:缓存的资源将在 xxx 秒后过期; no-cache:需要使用协商缓存来验证是否...

    目录

    cache-control

    强缓存:

    协商缓存:

    http1.0

    http1.1


    cache-control

     

    private:客户端可以缓存

    public:客户端和代理服务器均可缓存;

    max-age=xxx:缓存的资源将在 xxx 秒后过期;

    no-cache:需要使用协商缓存来验证是否过期;

    no-store:不可缓存

    must-revalidate:使用 must-revalidate 指令,代理会向源服务器再次验证即将返回的响应缓存目前是否仍有效。另外,使用 must-revalidate 指令会忽略请求的 max-stale 指令。

    proxy-revalidate:指令要求所有的缓存服务器在接收到客户端带有该指令的请求返回响应之前,必须再次验证缓存的有效性

    s-maxage:缓存的生存时间可以使用新的“s-maxage”(s 是 share 的意思,注意 maxage 中间没有“-”),只限定在代理上能够存多久,而客户端仍然使用“max-age”。

    no-transform:代理有时候会对缓存下来的数据做一些优化,比如把图片生成 png、webp 等几种格式,方便今后的请求处理,而“no-transform”就会禁止这样做,不许“偷偷摸摸搞小动作”。


     

    强缓存:

    强制缓存只有首次请求才会跟服务器通信,读取缓存资源时不会发出任何请求,资源的 Status 状态码为 200,资源的 Size 为 from memory 或者 from disk ,http 1.1 版本的实现优先级会高于 http 1.0 版本的实现。


     

    协商缓存:

    协商缓存每次请求都会与服务器交互,第一次是拿数据和标识的过程,第二次开始,就是浏览器询问服务器资源是否有更新的过程。每次请求都会传输数据,如果命中缓存,则资源的 Status 状态码为 304 而不是 200 。同样的,一般来讲为了兼容,两个版本的协商缓存都会被实现,http 1.1 版本的实现优先级会高于 http 1.0 版本的实现。

     

    http1.0 服务器:Last-Modified 客户端:If-Modified-Since

    http1.1 服务器:Etag 客户端:If-None-Match

    http 1.1 版本的实现优先级会高于 http 1.0 版本的实现

     

    http1.0

    在 http 1.0 版本中,第一次请求资源时服务器通过 Last-Modified 来设置响应头的缓存标识,并且把资源最后修改的时间作为值填入,然后将资源返回给浏览器。在第二次请求时,浏览器会首先带上 If-Modified-Since 请求头去访问服务器,服务器会将 If-Modified-Since 中携带的时间与资源修改的时间匹配,如果时间不一致,服务器会返回新的资源,并且将 Last-Modified 值更新,作为响应头返回给浏览器。如果时间一致,表示资源没有更新,服务器返回 304 状态码,浏览器拿到响应状态码后从本地缓存数据库中读取缓存资源。

     

    这种方式有一个弊端,就是当服务器中的资源增加了一个字符,后来又把这个字符删掉,本身资源文件并没有发生变化,但修改时间发生了变化。当下次请求过来时,服务器也会把这个本来没有变化的资源重新返回给浏览器。

     

    http1.1

    在 http 1.1 版本中,服务器通过 Etag 来设置响应头缓存标识。Etag 的值由服务端生成。在第一次请求时,服务器会将资源和 Etag 一并返回给浏览器,浏览器将两者缓存到本地缓存数据库。在第二次请求时,浏览器会将 Etag 信息放到 If-None-Match 请求头去访问服务器,服务器收到请求后,会将服务器中的文件标识与浏览器发来的标识进行对比,如果不相同,服务器返回更新的资源和新的 Etag ,如果相同,服务器返回 304 状态码,浏览器读取缓存

    展开全文
  • Tomcat环境下设置HTTP强缓存

    万次阅读 2017-01-14 21:25:23
    在之前的一篇文章《HTTP...一、设置HTTP强缓存  可通过Expires与Cache-Control控制资源何时过期。Expires通过设置一个具体过期日期来控制,Cache-Control是设置一个距离第一次请求之后多久的时间段来控制。1.自定义Fi
  • Http强缓存和协商缓存

    2020-12-02 21:11:41
    缓存这东西,第一次必须获取到资源后,然后根据返回的信息来告诉如何缓存资源,可能采用的是强缓存,也可能告诉客户端浏览器是协商缓存,这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是...
  • http强缓存-

    2020-10-16 09:03:03
    浏览器在命中强缓存的时候是不会发送请求至服务器的,上文也说到过,强缓存是根据资源请求的http头部信息来判断的,主要是根据哪些信息来判断的呢?其实呢强缓存主要是根据请求header头中的Expires或者是Cache-...
  • 对于客户端来说,HTTP缓存是web性能优化的重要手段。 优势: 减少了冗余的数据传递,节省宽带流量 ...浏览器缓存一般是针对静态资源(js/css/img等),我们将缓存分为强缓存和协商缓存,两者的主要区别是...
  • 浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。所以根据上面的特点,浏览器缓存有下面的优点:减少冗余的数据传输减少...
  • HTTP强缓存和协商缓存

    2020-09-21 12:56:09
    强缓存和协商缓存都是属于浏览器缓存 浏览器缓存 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。 浏览器缓存的有什么优点: 1....
  • 我们整天和浏览器和打交道,应该都听过强缓存和协议缓存,强缓存和协商缓存(也有叫对比缓存)都是浏览器的缓存策略,需要先明确一点,既然是浏览器的缓存,缓存的数据都是存放于客户端的机子上的,只是根据优先级...
  • 浏览器缓存在前端性能优化是个非常重要的点,第一次接触强缓存和协商缓存的概念的时候也是一头雾水,经过一轮面试背诵加理解终于有点感悟,希望以下的梳理对你有一定帮助。
  • 浏览器缓存的优点 浏览器将用户最近请求过的文档存储在本地磁盘,当用户再次访问时直接在本地加载,这样可以减少服务器的压力,加快用户访问网页的加载速度,提升用户体验。 浏览器缓存的过程 第一次请求: 首次...
  • 强缓存是设置过期时间,超过设置的时间会发请求,否则就会走缓存,连请求也不会发。 状态码是200 二、协商缓存 协商缓存常用模式有两种,一种是last-modified,一种是etag。也有地方叫对比缓存的。 last-modified...
  • 1、浏览器缓存 浏览器缓存是浏览器将用户请求过的静态资源(html、css、js),存储到电脑本地磁盘中,当浏览器再次访问时,就可以直接从本地加载了,不需要再去服务端请求了。 缓存的优点: 减少了不必要的数据...
  • 如下图,浏览器在请求某一资源时,会先获取该资源缓存的header信息,判断是否命中强缓存(cache-control和expires信息)。   1)查看是否有cache-control 的max-age / s-maxage , 如果有,则用服务器...
  • Nginx 配置 HTTP 强缓存

    2016-12-17 20:50:00
    # 配置 HTTP 强缓存静态文件,通过 Response Header 头返回 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js| css)$ { expires 3d; } } 上面通过 Response Header 通知浏览器将 gif|jpg|jpeg|png|bmp|swf|...
  • 基本原理浏览器在加载资源的时候,会先根据这个资源的一些http header判断他是否命中强缓存强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。当强缓存没有命中的时候,浏览器一定会发送一...
  • Http 缓存: 强缓存与协商缓存 文章目录Http 缓存: 强缓存与协商缓存简介参考完整示例代码正文Http 缓存机制:强缓存 & 协商缓存强缓存:`Expires` & `Cache-Control`Http 1.0:`Expires`Http 1.1:`Cache-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,091
精华内容 436
关键字:

http强缓存