图片缓存:浏览器刷新 和 304 Not Modified 与 If-Modified-Since 及 Cache-Control

最新推荐文章于 2024-08-07 10:01:30 发布
最新推荐文章于 2024-08-07 10:01:30 发布
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Web前端 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lihongjun_0204/article/details/84096679
本文详细解释了HTTP状态码304 Not Modified的工作原理及其应用场景，尤其是在客户端缓存利用方面的作用，并探讨了如何在服务器端实现该功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天在用chrome浏览淘宝页面的时候，发现很多来自淘宝图片HTTP状态码是 304 Not Modified

到百度搜索了一下，明白了 304状态的含义（以下绿色内容来自网络）：

304 Not Modified：客户端有缓冲的文件并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

如果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last Modified 。因此，如果请求中包含 If Modified Since，就说明已经有缓存在客户端。只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。对于静态文件，例如：CSS、图片，服务器会自动完成 Last Modified 和 If Modified Since 的比较，完成缓存或者更新。但是对于动态页面，就是动态产生的页面，往往没有包含 Last Modified 信息，这样浏览器、网关等都不会做缓存，也就是在每次请求的时候都完成一个 200 的请求。

我突然想起我所写的图片服务器没有实现HTTP 304 缓存功能。

这个 304 状态一般主要在用户刷新页面(F5键)的时候触发.
[b]当用户在刷新页面的时候，因为原来的页面里的很多图片已经缓存过，客户端的浏览器已经记录了图片的最后更新时间(Last Mod)，所以在用户刷新页面的时候，会向服务器提交一个字段：If-Modified-Since: Wed, 08 Sep 2010 21:35:06 GMT
[/b]

这个时候，服务器端的程序先取得这个字段的值，然后与服务器上的图片最后修改时间对比，如果相同，就直接返回 304 Not Modified ，然后停止。这样就不用把图片重新传输到客户端，达到节省带宽的目的。

关于 Cache-Control: max-age=秒 和 Expires

Expires = 时间，HTTP 1.0 版本，缓存的载止时间，允许客户端在这个时间之前不去检查（发请求）
max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒。
如果max-age和同时存在，则被Cache-Control的max-age覆盖。

Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大，那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代。

今天我还发现一个小的问题，是关于客户端的日期格式：

Wed, 08 Sep 2010 21:35:06 GMT 与 Wed, 8 Sep 2010 21:35:06 GMT

注意上面的格式，一个是8的前面有个前置的0，一个没有。

我发现firefox和chrome对这个日期格式处理一致，ie有点不同。
最终我修改了服务器端的程序：
//HTTP 日期格式: Wed, 08 Sep 2010 21:35:06 GMT
DateFormat dateFormatGMT = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss z", Locale.ENGLISH); //时间格式
【异常】“304 Not Modified” 是HTTP协议中的一种状态码，用于表示客户端请求的资源自上次获取以来没有发生修改，因此服务器无需返回完整的资源内容，仅告知客户端可以使用本地缓存的版本。
本本本添哥
07-07 91
摘要：304状态码是HTTP协议中表示资源未修改的响应码，用于优化缓存效率。其工作原理为：首次请求时服务器返回资源内容及标识（ETag/Last-Modified），后续请求通过比对标识判断资源是否变化。若未修改则返回304，客户端直接使用缓存；若修改则返回新资源。该机制能减少网络传输、提升加载速度，适用于静态资源请求等场景。注意304响应不含资源主体，需配合缓存策略使用。
CDN缓存的艺术（一）：HTTP缓存头部全攻略 (Cache-Control, Expires, ETag, Last-Modified)
码觉客的博客
05-20 88
今天，作为“CDN缓存的艺术”系列的第一篇，我们就来全面解析那些控制着内容“生老病死”的关键HTTP缓存头部：`Cache-Control`, `Expires`, `ETag`, 和 `Last-Modified`。理解了它们，你就掌握了CDN缓存策略的“遥控器”。
304 Not Modified详解
热门推荐
Frank的博客
02-28 28万+
第一次访问 200 鼠标点击二次访问 (Cache) 按F5刷新 304 按Ctrl+F5强制刷新 200        在客户端向服务端发送http请求时，若返回状态码为304 Not Modified 则表明此次请求为条件请求。在请求头中有两个请求参数：If-Modified-Since 和 If-None-Match。        当客户端缓存了目标资源但不确定该缓存资源是否是最新版本的时...
理解 HTTP 状态码 304: Not Modified
qq_45811217的博客
08-07 1万+
服务器使用这个状态码告诉客户端，资源没有变化，因此客户端可以继续使用它的缓存副本，而无需重新下载资源。当客户端第一次请求该图片时，会下载并缓存该图片。​ • 在后续请求中，客户端会带上之前缓存的相关信息（例如 If-Modified-Since 或 If-None-Match 头部），以检查资源是否已被修改。如果自上次请求以来资源没有被修改，服务器会返回 304 Not Modified 状态码，告诉客户端可以继续使用缓存的资源。​ • 客户端收到 304 响应后，使用缓存中的资源，而不需要重新下载。
304 Not Modified
Amy_cx的博客
01-04 5860
关于报304 Not Modified错的几种解决方法
HTTP 304 Not Modified
nightmare
05-27 1205
304 的标准解释是：Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 　　如果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 L
前端面经 http缓存机制：强缓存（expires和cache-control）、协商缓存（Etag/If-None-Match和Last-Modified/If-Modified-Since）
Ahua_Core的博客
03-10 3227
关于强缓存和协商缓存为什么需要缓存机制缓存的过程第一次缓存再次请求强缓存（Expires/Cache-Control）ExpiresCache-Control协商缓存（Etag/If-None-Match和Last-Modified/If-Modified-Since）Last-Modified/If-Modified-SinceEtag/If-None-Match 为什么需要缓存机制 缓存机制的定义： 浏览器在用户的本地磁盘存储了用户最近请求的资源。当用户再次请求同一资源时，浏览器直接从本地磁盘读取资源
Cache-control使用Cache-control:private学习笔记
09-30
在打开新窗口、地址栏回车、后退按钮和刷新按钮的场景下，如果设置了`Cache-Control: private`，浏览器会在首次访问时请求服务器，之后的访问会依赖于浏览器的缓存策略，但不会被中间的代理服务器缓存。 2. **其他...
Expires、Cache-Control、Last-Modified和If-Modified—Since、Etag和If-None-Match
yangyang的专栏
11-06 1718
1.Expires 页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度。 Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本，直到指定的时间为止。例如： Expires: Fri, 18 Mar 2016 07:41:53 GMT Expires缺点： 它要求服务...
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
09-09
3. `Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'`：设置允许的请求头，防止因特定请求头未被服务器...
ajax加载页面服务器返回 304 not modified
12-10
既然你的服务器都返回 304 not modified 那说明在服务器上，你这个xml文件没有修改过，或者要加载的页面在本地没有被修改，本地缓存造成了这个问题 常用的防止被缓存的方法，就是在后面加一个随机数，或者你也可以加个时间戳 比如请求的时候 url = “…….xml?t=” + ( new Date()() ).getTime().toString(); 本例中我采用的方法： 代码如下: var destination=”test.html” function goto(destination){ var ajaxobj=new AJAXRequest; // 创建AJAX对象,类在
HTTP/1.1 304 Not Modified
m0_37477061的博客
03-06 6077
HTTP/1.1 304 Not Modified不是服务器发出的错误提示。而是服务器所承载的业务系统在开发时为了节省链路带宽和提升浏览器的体验对GET/js、css、image等执行了缓存机制。客户端在第一次对服务器业务发出GET请求后，客户端浏览器缓存了该页面，当客户端第二次对服务器发出同样的GET请求时，若客户端缓存中的If-Modified-Since过期，客户端将向服务器发出GET请求，...
HTTP 304: Not Modified
冰雪为融的博客
04-28 2万+
HTTP 304: Not Modified ：Not Modified客户端有缓冲的文档并发出了一个条件性的请求（一般是提供if-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。如果客户端在请求一个文件的时候，发现自己缓存的文件有Last Modified,那么杂请求中会包含if Modified Since,这个时间就是缓存文件的...
接口304 Not Modified
weixin_44283589的博客
11-22 4229
这意味着客户端已经缓存了该资源，并且该资源未被修改。服务端会比较这两个参数与资源的最后修改时间和ETag值，如果匹配，则返回304状态码，否则返回200状态码和新的资源内容。举个例子，如果客户端已经缓存了一个网页，当用户再次访问该网页时，客户端会向服务端发送一个条件请求，请求头中包含If-Modified-Since和If-None-Match参数。如果服务端检测到该网页未被修改，则返回304状态码，客户端会使用缓存中的资源，否则返回200状态码和新的网页内容。
【项目实战】常见的HTTP状态码 （304 - Not Modified）
本本本添哥
03-20 1万+
304 - Not Modified 是一个 HTTP 状态码304 - Not Modified 并不是一个错误或异常。304 - Not Modified 是一个标准的 HTTP 状态码。
304 Not Modified 简述
dixu7849的博客
12-21 234
在客户端向服务端发送http请求时，若返回状态码为304 Not Modified 则表明此次请求为条件请求。在请求头中有两个请求参数：If-Modified-Since 和 If-None-Match。 当客户端缓存了目标资源但不确定该缓存资源是否是最新版本的时候, 就会发送一个条件请求。在进行条件请求时,客户端会提供给服务器一个If-Modified-Since请求头,其值为服...
304 Not Modified 是什么意思
lanzh_
11-20 1万+
304 的标准解释是：Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 如果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Las
304 Not Modified 是什么意思？
Kvkens`s 技术博客
05-28 3283
304 的标准解释是：Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 如 果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last
HTTP错误码304 Not Modified：理解缓存控制的重要性和实践方法
博客
08-15 7417
HTTP缓存机制是指在客户端和服务器之间存储和重用资源的一种方式。它通过缓存服务器、浏览器缓存和代理服务器来实现。当客户端请求一个资源时，服务器会在响应中返回缓存控制头字段，指示客户端是否可以缓存该资源以及缓存的有效期等信息。客户端在后续请求中，通过发送包含缓存验证信息的请求头字段来验证资源是否发生变化，并根据服务器返回的状态码来决定是否从缓存中获取资源。
再详细解释一下IF-MODIFIED-SINCE，和，IF-NONE-MATCH
最新发布
08-06
<think>我们被要求详细解释HTTP头字段If-Modified-Since和If-None-Match的用途、工作方式以及它们在缓存控制和条件请求中的应用场景。 根据用户提供的引用和之前的问题，我们知道这两个头字段都属于条件请求头部，用于缓存验证（协商缓存）。 引用[1]和[2]说明了If-Modified-Since的作用：它基于资源最后修改时间（Last-Modified）进行缓存验证。 引用[3]则概括了整个HTTP缓存机制，包括强缓存（expires和cache-control）和协商缓存（Etag/If-None-Match和Last-Modified/If-Modified-Since）。 下面我们将分别解释这两个头字段，并说明它们如何协同工作。 注意：在回答中，我们将使用中文，并按照要求对数学公式（如果有）使用LaTeX格式，但本题中数学公式较少，重点在解释机制。 另外，我们会在适当的地方引用用户提供的引用内容，并在末尾添加引用标识。 结构： 1. 介绍条件请求和协商缓存的背景 2. 分别详细解释If-Modified-Since和If-None-Match 3. 解释它们的工作流程（结合例子） 4. 讨论应用场景和注意事项 5. 总结</think>### HTTP头字段`If-Modified-Since`与`If-None-Match`详解 #### 一、核心作用与定位 这两个请求头字段均属于**条件请求（Conditional Requests）** 机制，用于实现**协商缓存（Validation Caching）**。其核心目标是在客户端已有缓存副本时，向服务器验证资源是否更新： - 若未更新 → 返回 `304 Not Modified` → 客户端直接使用缓存 - 若已更新 → 返回 `200 OK` 和新资源 → 更新客户端缓存 ```mermaid graph LR A[客户端发起请求] --> B{携带缓存验证头} B -->|If-Modified-Since<br>或 If-None-Match| C[服务器] C -->|资源未修改| D[返回304] C -->|资源已修改| E[返回200+新资源] ``` #### 二、字段详细解析 ##### 1. `If-Modified-Since` - **作用原理**： 客户端携带**上次响应头中的`Last-Modified`时间值**（资源最后修改时间），服务器比较当前资源修改时间： - 若客户端时间 ≥ 服务器时间 → 返回 `304` - 若客户端时间 < 服务器时间 → 返回 `200` 和新资源 - **工作流程**： 1. 首次请求：服务器返回资源及`Last-Modified: Fri, 31 Aug 2007 02:02:20 GMT` 2. 后续请求：客户端自动添加`If-Modified-Since: Fri, 31 Aug 2007 02:02:20 GMT` 3. 服务器校验时间戳决定响应状态[^1][^2] - **典型应用场景**： - 静态资源（如图片/CSS/JS文件）的缓存验证 - 修改频率较低的内容（如新闻文章） ##### 2. `If-None-Match` - **作用原理**： 客户端携带**上次响应头中的`ETag`值**（资源唯一标识符），服务器比较当前资源`ETag`： - 若`ETag`匹配 → 返回 `304` - 若`ETag`不匹配 → 返回 `200` 和新资源 - **关键优势**： - 解决时间戳精度问题（如1秒内多次修改） - 处理特殊场景： - 资源内容不变但修改时间变化（如备份恢复） - 分布式服务器时间不同步 - 文件编码改变但内容不变（如gzip重压缩） - **工作流程**： 1. 首次请求：服务器返回`ETag: "45bae1-16a-46d776ac"` 2. 后续请求：客户端添加`If-None-Match: "45bae1-16a-46d776ac"` 3. 服务器校验`ETag`决定响应状态[^3] #### 三、协同工作与优先级 1. **典型协作流程**： ```mermaid sequenceDiagram participant Client participant Server Client->>Server: GET /resource Server-->>Client: 200 OK + Last-Modified + ETag Client->>Server: GET /resource If-Modified-Since: [时间戳] If-None-Match: [ETag] alt 资源未修改 Server-->>Client: 304 Not Modified else 资源已修改 Server-->>Client: 200 OK + 新资源 end ``` 2. **优先级规则**： - 当两者同时存在时，**`If-None-Match`优先级更高**（因`ETag`更精确） - 服务器行为： - 若`ETag`验证通过 → 直接返回`304`（忽略时间戳） - 若`ETag`验证失败 → 再检查`If-Modified-Since` #### 四、应用场景对比 | 场景 | `If-Modified-Since` | `If-None-Match` | |--------------------------|---------------------|-----------------| | 时间戳精度要求高 | ✗ 不适用 | ✓ 适用 | | 资源内容不变时间戳变化 | ✗ 误判失效 | ✓ 准确判断 | | 分布式服务器环境 | ✗ 时间同步问题 | ✓ 稳定适用 | | 简单静态资源缓存 | ✓ 实现简单 | ✓ 更可靠 | | 大文件分块传输 | ✗ 不适用 | ✓ 支持分块验证 | #### 五、最佳实践建议 1. **服务端配置**： - 始终生成`ETag`和`Last-Modified`响应头 - 对动态内容设置`Cache-Control: no-cache`强制验证 ```nginx # Nginx配置示例 location ~* \.(js|css|png)$ { etag on; add_header Last-Modified ""; } ``` 2. **客户端优化**： - 配合`Cache-Control: max-age=0`实现即时验证 ```http GET /style.css HTTP/1.1 Host: example.com Cache-Control: max-age=0 If-None-Match: "abc123" ``` 3. **性能影响**： - 成功`304`响应可减少90%+带宽（仅传输约150字节头部） - 验证失败时增加约10ms延迟（需完整资源传输） > **关键结论**：现代Web应用应优先采用`ETag/If-None-Match`机制，辅以`Last-Modified/If-Modified-Since`作为降级方案，在保证缓存效率的同时避免"幽灵修改"问题[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值