浏览器如何进行静态资源缓存?—— 强缓存 & 协商缓存

在平时使用浏览器排查问题的过程中,我们有时会看到浏览器网络请求中出现304状态码,那么是什么情况下出现304呢?下面是关于这一现象的解释:

状态码 304

状态码 304 表示 "Not Modified",它是 HTTP 协议中的一个状态码,用于指示客户端的缓存副本仍然有效,并且可以继续使用缓存的资源,而不需要服务器返回实际的内容。

当客户端发送一个带有缓存验证信息的请求(例如 If-None-MatchIf-Modified-Since),服务器会检查这些验证信息与当前资源的状态是否匹配。如果验证信息与服务器上的资源匹配,表示资源没有发生变化,则服务器会返回 304 状态码,告诉客户端可以继续使用缓存的资源。

304 响应通常伴随着以下特征:

  • 响应头中没有实际的响应体,因为服务器不需要返回实际内容。
  • 响应头中通常会包含 ETagLast-Modified 字段,用于告诉客户端如何验证缓存。
  • 响应头中可能包含新的 Cache-Control 指令,用于更新缓存策略。

当客户端接收到 304 响应时,它会使用缓存的资源,从本地缓存中加载所需的文件,而无需再次下载整个资源。这样可以减少网络请求和服务器负载,提高页面加载速度和性能。

总结来说,304 状态码表示资源未修改,缓存仍有效,客户端可以继续使用缓存的资源,避免了无效的数据传输和资源浪费。

浏览器如何进行静态资源缓存 ?

强缓存(Cache-Control、Expires)和协商缓存(ETag、Last-Modified)是 HTTP 缓存机制中常见的两种方式。
在这里插入图片描述

一、 强缓存(Cache-Control、Expires)

强缓存通过在响应头中设置 Cache-Control 和 Expires 字段来控制缓存的行为。

1. Cache-Control:

Cache-Control 是 HTTP 头部中的一个字段,用于指定资源的缓存策略。通过设置 Cache-Control 的值,可以告诉浏览器如何缓存和重新验证资源。

可以设置多个指令,常见的指令有:

  • max-age:指定缓存的有效时间(以秒为单位)。
  • no-cache:表示客户端必须向服务器发送请求进行验证,不能直接使用缓存的资源。
  • no-store:表示不缓存任何响应内容。

2. Expires:

Expires 是 HTTP 头部中的一个字段,表示资源的到期时间。通过设置 Expires 的值为一个绝对过期时间,浏览器可以知道在该时间之前可以直接使用缓存的资源。然而,Expires 是一个相对较旧的缓存控制方式,现在通常使用 Cache-Control 代替。

在http1.0是Expires,在http1.1是Cache-Control,俩字段同时存在的话1.1优先级肯定大于1.0;

当客户端发起请求时,如果缓存的资源没有过期(根据 Cache-Control 或 Expires 判断),浏览器会直接从缓存中获取资源,而不发送请求到服务器。

二、协商缓存(ETag、Last-Modified)

协商缓存通过在请求头中发送 If-Modified-SinceIf-None-Match 字段,以及在响应头中设置 Last-ModifiedETag 字段来控制缓存的行为。

1. Last-Modified 和 If-Modified-Since:

服务器在响应头中返回 Last-Modified 字段,表示资源的最后修改时间。当客户端再次请求该资源时,在请求头中添加 If-Modified-Since 字段,值为上次响应中Last-Modified
如果资源在该时间后没有修改过,服务器会返回 304 Not Modified,客户端继续使用缓存的资源。

2. ETag 和 If-None-Match:

服务器在响应头中返回 ETag 字段,它是一个唯一标识符,代表资源的特定版本。当客户端再次请求该资源时,在请求头中添加 If-None-Match字段,值为上次响应中ETag 值。
如果资源的 ETag 值与客户端发送的 If-None-Match 值匹配 ,服务器会返回 304 Not Modified,客户端继续使用缓存的资源。

在http1.0是Last-Modified,在http1.1是Etag,俩字段同时存在的话1.1优先级肯定大于1.0;

协商缓存相对于强缓存提供了更细粒度的控制,可以根据资源的变化情况来判断是否使用缓存

通常情况下,浏览器会先检查强缓存,如果强缓存生效,则直接使用缓存的资源;如果强缓存失效,则发送请求到服务器进行协商缓存验证,根据服务器返回的响应来决定是否使用缓存的资源。

两种缓存策略的优缺点比较:

  • 强制缓存的缺点:就是可能在强制的这段时间里服务器文件更新了,那浏览器就读不到最新的资源了;
  • 协商缓存的缺点:就是每次都要发个请求去问服务器资源是否更新,可能造成不必要的时间和流量浪费;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值