首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浏览器缓存机制剖析

、缓存过期,文件有改动,那么下载新文件,此时状态码为200 2、缓存过期,文件无改动,那么服务器只会给你返回一个头信息(304),浏览器读取304后,就会去读取过期缓存文件。...但它实际上的机制是,仍然对资源使用缓存,但每一次在使用缓存之前必须(MUST)向服务器对缓存资源进行验证。...而no-cache则是告诉浏览器在每一次使用缓存之前,你必须(MUST)对资源进行重新验证。 区别在于:SHOULD是非强制性的,而MUST是强制性的。...这是一个典型的劣币驱逐良币 不管是max-age=0还是no-cache,都会返回304(资源无修改的情况下),no-store才是真正的不进行缓存。...如果服务端对两者的验证结果不一致,例如通过一个条件判断资源发生了更改,而另一个判定资源没有发生更改,则不允许返回304状态。但话说回来,是否返回还是通过服务端编写的实际代码决定的。

65270

跟我一起探索 HTTP-HTTP缓存

备注: 在评估如何使用 ETag 和 Last-Modified 时,请考虑以下几点:在缓存重新验证期间,如果 ETag 和 Last-Modified 都存在,则 ETag 优先。...或其他登录方式,并且内容是为每个用户个性化的,那么也必须提供 private,以防止与其他用户共享: Cache-Control: no-cache, private 缓存破坏 最适合缓存的资源是静态不可变文件...因此,你可以使用包含基于版本号或哈希值的更改部分的 URL 来提供 JavaScript 和 CSS。一些方法如下所示。...数字“37”、“38”和“41”分别代表一周、一个月和一年。 因为缓存会在保存新条目时删除旧条目,所以一周后存储的响应仍然存在的可能性并不高——即使 max-age 设置为 1 周。...对于预构建的静态文件生成这些标头很容易。 这里的 ETag 值可能是文件的哈希值。

28151
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    通过 Node.js 小示例学习浏览器缓存策略

    ,但是在 max-stale 这个时间内还可以使用过期的缓存,而不需要向服务器请求新的内容 重新验证 must-revalidate:如果 max-age 设置的内容过期,必须要向服务器请求重新获取数据验证内容是否过期...,为什么静态资源文件改变后,再次发起请求还是之前的内容,没有变化呢?...先回答第一个问题 在页面中引入静态资源文件,为什么静态资源文件改变后,再次发起请求还是之前的内容,没有变化呢?...和 If-None-Match Last-Modified 是以文件的修改时间来判断,Etag 是根据文件的内容是否修改来判断,如果 Etag 有修改重新获取新的资源返回,如果未修改返回 304 通知客户端使用本地缓存...相同点:校验通过返回 304 通知客户端使用本地缓存,校验不通过重新获取最新资源,设置 Last-Modified/Etag 响应头,返回状态码 200 。 疑问? POST 可以缓存吗?

    1.3K30

    Nginx下关于缓存控制字段cache-control的配置说明 - 运维小结

    请求确认 ,该资源是否有修改, 有的话 返回200 , 无的话 返回304。...- 重新验证和重新加载 must-revalidate 缓存必须在使用之前验证旧资源的状态,并且不可使用过期资源。表示如果页面过期,则去服务器进行获取。...资源(如果未过期)在服务器上不发生改变,因此客户端不应发送重新验证请求头(例如If-None-Match或If-Modified-Since)来检查更新,即使用户显式地刷新页面。...之后,服务器才能返回304. 6、Last-Modified和Etag 分布式系统里多台机器间文件的last-modified必须保持一致,以免负载均衡到不同机器导致比对失败....Expires =max-age + “每次下载时的当前的request时间” 所以一旦重新下载的页面后,expires就重新计算一次,但last-modified不会变化. 8、基于nginx配置使用总结

    8.7K51

    Web浏览器缓存机制

    客户端会缓存请求过的静态资源(图片,CSS 文件,JS文件等),当用户再次请求相同的url时,浏览器会根据缓存规则判断是否使用已经缓 存的静态资源文件,或者绕过资源缓存直接请求服务器重新获取资源。...(b)no-cache:每次发起请求都需要验证缓存资源的新鲜度,新鲜度满足则返回304状态码,使用缓存资源,否则返回200状态码,返回资源主体(c)no-store:不缓存,每次请求需要从服务器重新获取资源...获取Last-Mdodied的值发送到服务器和请求资源的修改时间比对,如果服务器资源修改过则返回资源主体和200状态码到浏览器,浏览器更新缓存资源,否则说明资源无修改返回304状态码 Etag/If-None-Match...(a) Etag是请求的服务器资源的唯一标识,资源改动则标识更改,从而验证资源是否更新。...缓存生效,返回304状态码 缓存失效,返回200状态码和新的资源结果,浏览器加载资源并且更新本地缓存 协商缓存相关的首部:Last-Modified / If-Modified-Since和Etag /

    1.5K30

    浅谈浏览器HTTP的缓存机制

    如果服务器发现ETag匹配不上,那么直接以常规GET 200回包形式将新的资源(当然也包括了新的ETag)发给客户端;如果ETag是一致的,则直接返回304知会客户端直接使用本地缓存即可。...如果 Last-Modified 和 ETag 同时被使用,则要求它们的验证都必须通过才会返回304,若其中某个验证没通过,则服务器会按常规返回资源实体及200状态码。...上图的前三条请求是原始请求,接着的三条请求是刷新页面后的新请求,在发新请求之前我们修改了 reset.css 文件,所以它的 Last-Modified 和 ETag 均发生了改变,服务器因此返回了新的文件给客户端...而 dog.jpg 我们没有做修改,其Last-Modified 和 ETag在服务端是保持不变的,故服务器直接返回了304状态码让客户端直接使用缓存的 dog.jpg 即可,没有把实体内容返回给客户端...每次你刷新页面,浏览器都会重新发出这条url的请求,你会发现其 Date 值是不断变化的,这说明该链接没有命中缓存,都是从原服务器返回过来的数据。

    72420

    如何让浏览器不缓存文件

    需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在ETag,那么请求的时候会与服务端验证,如果资源未被更改,则可以避免重新下载。...服务器收到If-Modify-Since后,根据资源的最后修改时间判断是否命中缓存。 如果命中缓存,则返回304,并且不会返回资源内容,并且不会返回Last-Modify。...与Last-Modified不一样的是,当服务器返回304 Not Modified 的响应时,由于ETag重新生成过,response header 中还会把这个 ETag返回,即使这个ETag跟之前的没有变化...Cache-Control:public, max-age=31536000 「需要重新验证」 指定no-cache或max-age=0, must-revalidate表示客户端可以缓存资源,每次使用缓存资源前都必须重新验证其有效性...浏览器发现文件名有更改,会重新获取静态资源,达到了不缓存文件的目的。 使用HTML禁用缓存 HTML也可以禁用缓存, 即在页面的head标签中加入meta标签。

    2.8K30

    设计一个完美的HTTP缓存策略

    服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对, 不同,说明资源又被改动过,则响应整片资源内容,返回状态码200; 相同,说明资源无新修改,则响应HTTP 304,...和no-cache must-revalidate的意义为必须进行验证,但是它一般是和max-age一起使用的,不会单独使用, Cache-Control: must-revalidate, max-age...如果服务端对两者的验证结果不一致,例如通过一个条件判断资源发生了更改,而另一个判定资源没有发生更改,则不允许返回304状态。但话说回来,是否返回还是通过服务端编写的实际代码决定的。...5.4、max-age=0 VS. no-cache max-age=0是在告诉浏览器,资源已经过期了,你应该(SHOULD)对资源进行重新验证了;而no-cache则是告诉浏览器在每一次使用缓存之前,...你必须(MUST)对资源进行重新验证。

    59831

    从前端角度理解缓存

    秒后失效 no-cache: 需要使用对比缓存来验证缓存数据 no-store: 所有内容都不会缓存,强制缓存,对比缓存都不会触发 last-modified: 内容上次被修改的时间 Etag: 文件的特殊标识...ETag ETag是对资源的特殊标识 Etag: W/"e563df87b65299122770e0a84ada084f" 请求该资源成功之后,将返回的ETag存入if-none-match字段中(浏览器自动记录了该字段信息...),同样在请求资源时传递给服务器,服务器查询该编码对应的资源有无更新,无更新返回304状态,更新返回200并重新请求。...当接口状态返回304时,资源默认存储在memory cache中,当页面关闭后,重新打开需要再次请求。...当您访问chrome中的URL时,页面上的HTML和其他资产(如图像)将本地存储在内存和磁盘缓存中。

    60010

    浅谈浏览器缓存

    并且在一个会话中已经检查过新鲜度 校验值(验证机制):服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag),它可以用来作为浏览器再次请求过程的校验标识。...如果没有修改,则返回码为304,使用缓存;如果修改过,则再次去服务器请求资源,返回码和首次请求相同为200,资源为服务器最新资源。...Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304。...一般情况下,两者会配合一起使用,因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时,浏览器会忽略缓存继续向服务器发送请求,这时Last-Modified/ETag将能够很好利用304,从而减少响应开销...304还是200; 而当用户使用Ctrl+F5进行强制刷新的时候,只是所有的缓存机制都将失效,重新从服务器拉去资源。

    1.5K70

    浏览器缓存

    但协商缓存本地缓存会被忽略,会去请求服务器验证资源是否更新,如果没更新才继续使用本地缓存,此时返回的是 304,这就是协商缓存。协商缓存主要包括 Last-Modified 和 Etag。...,返回新的资源 Last-Modified = If-Modified-Since:是最新的,无需再从服务端响应,此时返回304,直接使用缓存。...启用 etag 之后,请求资源后的响应返回会增加一个 etag 字段,如下:Etag: “FllOiaIvA1f-ftHGziLgMIMVkVw_”,具体同上 指令 参数 请求报文中的作用 响应报文中的作用...no-cache 无 客户端提醒缓存服务器,在使用缓存前,不管缓存资源是否过期了,都必须进行校验 客户端提醒缓存服务器,在使用缓存前,不管缓存资源是否过期了,都必须进行校验 max-age=[秒] 秒...秒]) 提示缓存服务器,即使资源过期也接收;或者过期后的指定时间内,客户端也会接收 无 min-fresh=[秒] 提示缓存服务器,如果资源在指定时间内还没过期,则返回 无 only-if-cached

    78430

    前端网络高级篇(三)浏览器缓存

    -还需等等 Application Cache 通过manifest配置文件在本地有选择性的存储JS/CSS/图片等静态资源存储大小:5M静态资源必须和HTML文件同源逐渐被Service Worker...比如,单页面项目中,每次发布JS和CSS文件都可能发生变化(通过在文件名上加hash来指定变化),那么,必须保证每次请求到的HTML文件必须是最新的。...为了便于服务器解析和网站地址的唯一性,我们又不能在HTML文件上应用hash指纹。在这种场景下,就只能使用协商缓存了。 2....与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化...no-cache(协商缓存):如果服务器在响应中设置了no-cache,即Cache-Control:no-cache,那么浏览器在使用缓存的资源之前,必须先与服务器确认返回的响应是否被更改,如果资源未被更改

    94010

    HTTP 缓存技术

    ETag:浏览器缓存过期的时候,通过Etag令牌检查文件是否出现改变。Etag 是特殊算法计算的唯一哈希值。Last-Modified:和Etag用途相同,但是它是基于时间的策略检查是否更改。...no-cache:浏览器在每次使用缓存之前都必须使用服务器重新验证。注意这个字段并不是禁用缓存的真正含义,这里暂时卖个关子,下文继续解释。...两者的区别是max-age=0通常是告诉浏览器建议刷新缓存,max-age=0是非强制性(Should) 的,no-cache要求强制和服务器进行验证才允许使用缓存,所以no-cache 具有强制(MUST...服务器对比Etag进行校验,比较是否和本地一致。3. 如果一致返回304,浏览器可以继续使用资源。4. 如果不一致就需要重新返回请求结果,再次进行缓存。...If-None-Match和ETag的内容是否一致即可,内容一致则返回304并且依然使用,不一致则返回新的请求结果,并且重新缓存。

    78800

    从前端角度理解缓存缓存是怎么回事缓存的类型缓存存储在哪薄荷应用CDN缓存如何合理应用缓存

    秒后失效 no-cache: 需要使用对比缓存来验证缓存数据 no-store: 所有内容都不会缓存,强制缓存,对比缓存都不会触发 last-modified: 内容上次被修改的时间 Etag: 文件的特殊标识...ETag ETag是对资源的特殊标识 Etag: W/"e563df87b65299122770e0a84ada084f" 请求该资源成功之后,将返回的ETag存入if-none-match字段中(浏览器自动记录了该字段信息...),同样在请求资源时传递给服务器,服务器查询该编码对应的资源有无更新,无更新返回304状态,更新返回200并重新请求。...当接口状态返回304时,资源默认存储在memory cache中,当页面关闭后,重新打开需要再次请求。...当您访问chrome中的URL时,页面上的HTML和其他资产(如图像)将本地存储在内存和磁盘缓存中。

    1.2K20

    iOS的web缓存相关

    如果打开缓存策略,则请求头带了If-None-Match(对应直接的ETag: "5e58f3dd-b0b"),此时回包体积明显变小,同时返回码是304; ?...当请求或者response带有no-cache、max-age=0时,缓存的资源仍可使用,但是会通过请求进行验证,类似上面的ETag,返回304表示Not Modified,可以继续使用;(no-cache...(前提是客户端的request的header,没有设置no-cache和max-age=0) 一个资源的请求流程: ?...图源网络,侵删 关于request和response的总结: request的header是资源请求的核心控制参数,如果request的cache策略是no-cache或者max-age=0,则一定会验证资源...阻断了浏览器发起的网络请求,如果本地有匹配的数据,则使用本地数据返回,如果没有使用网络请求,最终所有的数据都会加载到cache; web缓存SDK和上面的缓存策略并没有关系,上面的缓存策略决定是否要发起网络请求去验证资源

    1.1K30

    HTTP缓存机制的Etag、Last-Modified、If-None-Match和If-Modified-Since、Expires和Cache-Control笔记

    如果不相同,就将If-None-Match的值设为true,返回状态码为200,客户端重新解析服务器返回的数据。 问题来了,Etag和Last-Modified有什么区别?...有时开发人员会在修复某些内容后将所有文件上传到服务器,即使内容仅在子集上更改,也会重置所有文件的Last-Modified日期。为了适应这种情况,大多数服务器也会发送一个ETag。...,此时Etag的作用体现出来,根据资源计算的哈希值不变,说明资源无变化,返回响应报文的响应体为空,状态码304,客户端仍然使用缓存。...因此,发送无缓存值指示浏览器或代理仅仅基于缓存内容的“新鲜度标准”不使用缓存内容。防止旧内容在未经验证的情况下向用户显示的另一种常见方法是Cache-Control:max-age = 0。...这会指示用户代理内容是陈旧的,并且应在使用前进行验证。所以no-cache和max-age=0是相同效果。Cache-Control:no-cache 也适用于客户端发出的请求。

    2.4K20

    HTTP缓存

    ETag 值做对比,如果两个值不相同,就返回资源内容和新的 Etag 值,响应码为200;如果值相同,说明资源还没更新,就返回 304 状态码。...no-cache 和 no-store 这两个指令就是“通用”的指令。 no-cache 中如果包含 no-cache 指令,表示客户端可以缓存资源,每次使用缓存资源前都必须重新验证其有效性。...设置 max-age=0 的功能与之类似。以客户端角度看,no-cache 表示强制向源服务器再次验证有效期,以服务端角度看,no-cache 表示资源可以缓存,但在每次使用前都要由服务端确认一下。...must-revalidate 这个指令通常与 max-age 一起使用,当设定的 max-age 到期后,客户端会向服务端发起网络请求,验证缓存资源是否还有效。它像是延迟版的 no-cache。...,验证通过(即没有过期)就更新资源副本的新鲜度,再返回这个资源副本(此时的响应码为 304 Not Modified); 如果服务端验证不通过,就从服务器返回资源,再将最新资源的副本放入缓存中;

    83540

    浏览器缓存机制剖析

    当max-age 与 max-stale 和 min-fresh 同时使用时,它们的设置相互之间独立生效,最为保守的缓存策略总是有效。...的设置,至少要留有3天的新鲜期,缓存资源将在4月9日失效(12-3=9); 由于客户端总是采用最保守的缓存策略,因此,4月9日后,对于该资源的请求将重新向服务器发起验证。...服务器收到请求后,拿If-None-Match字段的值与资源的ETag值进行比较,若相同,则命中协商缓存,返回304响应。...Vary 对于服务器而言,资源文件可能不止一个版本,比如说压缩和未压缩,针对不同的客户端,通常需要返回不同的资源版本。...如此一来,同一个url,就能针对PC和Mobile返回不同的缓存内容。

    1.4K60

    HTTP 缓存机制

    过期内容:超过设置的有效时间,被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求,必须重新向源服务器请求新的内容或者验证缓存的内容是否仍然准备。...) 缓存的内容将在 xxx 秒后失效,失效前可以直接使用本地缓存,失效后必须向服务器确认资源是否已经改变。...缓存过期取值 存储策略里面 no-cache 等同于 max-age=0 ,假如服务端返回的响应中没有指明 max-age 、 no-cache 或 Expires 时,客户端是否会缓存 http response...如果返回 304 Not Modified,代表资源没有发生改变可以使用缓存的数据,获取新的过期时间。反之返回 200 就相当于重新请求了一遍资源并替换旧资源。...服务器端收到带 If-Modified-Since 的请求后会去和资源的最后修改时间对比。若修改过就返回最新资源,状态码 200 ,若没有修改过则返回 304 。

    75820

    前端性能优化(二)——浏览器缓存机制

    3、减少网络延迟,加快网页加载 浏览器缓存 web资源后,减少网络请求,可以更快速地获取到服务器返回数据,同时使用浏览器缓存内的文件比服务器获取快很多,所以网页加载速度明显快很多。...3.2、校验值(验证):服务器返回资源的时候,会在响应头信息中带上资源实体标签 Entity Tag,可以用来作为浏览器再次请求过程的校验标识,如果发现校验标识不匹配,说明资源已经被修改过或过期,浏览器需要重新请求资源...web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对,决定返回200或304 各种类型之间的关系和区别: Cache-Control 与 Expires:它两作用一样...一般情况下,两者配合使用,因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时,浏览器会忽略缓存继续向服务器发送请求,这时Last-Modified/ETag将能够很好利用304,从而减少响应开销。...两者可以一起使用,服务器优先验证ETag,一致时,才会继续比对Last-Mofifed,才决定是否要返回304。

    58320
    领券