面试:HTTP缓存机制

article/2025/9/11 4:33:53

深入理解 HTTP 缓存机制 - 刘星的个人网站

深入理解HTTP缓存机制及原理 - 掘金

面试题 “ 能不能说下 304 的过程,以及影响缓存的头部属性有哪些?”

304 状态码是表示缓存 

301 表示被请求 url 永久转移到新的 url;302 表示被请求 url 临时转移到新的 url。

301 搜索引擎会索引新 url 和新 url 页面的内容;302 搜索引擎可能会索引旧 url 或者 新 url 的页面内容。

强缓存

强缓存不会向服务器发送请求,直接从缓存中读取资源,在 chrome 控制台的 network 选项中可以看到该请求返回 200 的状态码,并且size显示from disk cachefrom memory cache

协商缓存

协商缓存会先向服务器发送一个请求,服务器会根据这个请求的 request header 的一些参数来判断是否命中协商缓存,如果命中,则返回 304 状态码并带上新的 response header 通知浏览器从缓存中读取资源。

总结

强制缓存由 Cache-ControlExipres(HTTP1.0)控制。浏览器直接读本地缓存,不会再跟服务器端交互,状态码 200。

协商缓存由 Last-Modified / IfModified-Since, Etag /If-None-Match实现,每次请求需要让服务器判断一下资源是否更新过,从而决定浏览器是否使用缓存,如果是,则返回 304,否则重新完整响应。

HTTP 缓存控制

在 HTTP 中,我们可以通过设置响应头以及请求头来控制缓存策略。

强缓存可以通过设置ExpiresCache-Control 两种响应头实现。如果同时存在,Cache-Control优先级高于Expires

Expires

Expires 响应头,它是 HTTP/1.0 的产物。代表该资源的过期时间,其值为一个绝对时间。它告诉浏览器在过期时间之前可以直接从浏览器缓存中存取数据。由于是个绝对时间,客户端与服务端的时间时差或误差等因素可能造成客户端与服务端的时间不一致,将导致缓存命中的误差。如果在Cache-Control响应头设置了 max-age 或者 s-max-age 指令,那么 Expires 会被忽略。

Expires: Wed, 21 Oct 2015 07:28:00 GMT

Cache-Control

Cache-Control 出现于 HTTP/1.1。可以通过指定多个指令来实现缓存机制。主要用表示资源缓存的最大有效时间。即在该时间端内,客户端不需要向服务器发送请求。优先级高于 Expires。其过期时间指令的值是相对时间,它解决了绝对时间的带来的问题。

Cache-Control: max-age=315360000

Cache-Control 有很多属性,不同的属性代表的意义也不同。

可缓存性

  • public 表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存。
  • private 表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)
  • no-cache 不使用强缓存,需要与服务器验协商缓存验证。
  • no-store 缓存不应存储有关客户端请求或服务器响应的任何内容,即不使用任何缓存。

过期

  • max-age=<seconds> 缓存存储的最大周期,超过这个周期被认为过期。
  • s-maxage=<seconds> 设置共享缓存。会覆盖max-ageexpires,私有缓存会忽略它
  • max-stale[=<seconds>] 客户端愿意接收一个已经过期的资源,可以设置一个可选的秒数,表示响应不能已经过时超过该给定的时间。
  • min-fresh=<seconds> 客户端希望在指定的时间内获取最新的响应

重新验证和重新加载

  • must-revalidate 如页面过期,则去服务器进行获取。
  • proxy-revalidate 与must-revalidate 作用相同,但是用于共享缓存。

其他

  • only-if-cached 不进行网络请求,完全只使用缓存。
  • no-transform 不得对资源进行转换和转变。例如,不得对图像格式进行转换。

协商缓存可以通过 Last-Modified/If-Modified-SinceETag/If-None-Match这两对 Header 来控制。

Last-Modified、If-Modified-Since

Last-ModifiedIf-Modified-Since 的值都是 GMT 格式的时间字符串,代表的是文件的最后修改时间。

  1. 在服务器在响应请求时,会通过Last-Modified告诉浏览器资源的最后修改时间。

  2. 浏览器再次请求服务器的时候,请求头会包含Last-Modified字段,后面跟着在缓存中获得的最后修改时间。

  3. 服务端收到此请求头发现有if-Modified-Since,则与被请求资源的最后修改时间进行对比,如果一致则返回 304 和响应报文头,浏览器只需要从缓存中获取信息即可。如果已经修改,那么开始传输响应一个整体,服务器返回:200 OK

但是在服务器上经常会出现这种情况,一个资源被修改了,但其实际内容根本没发生改变,会因为Last-Modified时间匹配不上而返回了整个实体给客户端(即使客户端缓存里有个一模一样的资源)。为了解决这个问题,HTTP/1.1 推出了Etag。Etag 优先级高与Last-Modified

Etag、If-None-Match

Etag都是服务器为每份资源生成的唯一标识,就像一个指纹,资源变化都会导致 ETag 变化,跟最后修改时间没有关系,ETag可以保证每一个资源是唯一的。

在浏览器发起请求,浏览器的请求报文头会包含 If-None-Match 字段,其值为上次返回的Etag发送给服务器,服务器接收到次报文后发现 If-None-Match 则与被请求资源的唯一标识进行对比。如果相同说明资源没有修改,则响应返 304,浏览器直接从缓存中获取数据信息。如果不同则说明资源被改动过,则响应整个资源内容,返回状态码 200。

浏览器第一次请求:

浏览器再次请求时:


http://chatgpt.dhexx.cn/article/miMg2ewt.shtml

相关文章

HTTP缓存机制--客户端缓存

HTTP缓存机制分为两种&#xff0c;客户端缓存和服务端缓存&#xff0c;本文主要对客户端缓存进行简单的分析。 服务端缓存 服务端缓存又分为 代理服务器缓存 和 反向代理服务器缓存&#xff08;也叫网关缓存&#xff0c;比如 Nginx反向代理、Squid等&#xff09;&#xff0c;其…

【浏览器】HTTP 缓存机制

HTTP 缓存机制 HTTP 缓存存储与请求关联的响应&#xff0c;并将存储的响应复用于后续请求。 分类 私有缓存 & 公有缓存 HTTP Caching 标准中&#xff0c;有两种不同类型的缓存&#xff1a;私有缓存和共享缓存。 私有缓存是绑定至特定客户端的缓存——通常是浏览器缓存&…

http协议+缓存机制

http协议缓存机制 文章目录 http协议缓存机制前言一、http1.http1.0/1.12.http2.03.一个TCP连接可以发送多少个HTTP请求4.浏览器最多可以向同一个host建立几个TCP连接5.其他关于http 二、缓存1.强缓存2.协商缓存3.etag解决了last-modified不能解决的问题4.Nginx如何配置缓存 前…

彻底弄懂HTTP缓存机制及原理

前言 Http 缓存机制作为 web 性能优化的重要手段&#xff0c;对于从事 Web 开发的同学们来说&#xff0c;应该是知识体系库中的一个基础环节&#xff0c;同时对于有志成为前端架构师的同学来说是必备的知识技能。 但是对于很多前端同学来说&#xff0c;仅仅只是知道浏览器会对…

【网络】http缓存机制

HTTP缓存有多种规则&#xff0c;根据是否需要重新向服务器发起请求来分类&#xff0c;我们将其分为两大类 强制缓存对比缓存 流程 强制缓存流程如下 对比缓存流程如下 强制缓存 我们知道&#xff0c;强制缓存在数据为失效的情况下&#xff0c;可以直接使用缓存数据 在没…

彻底理解浏览器的Http缓存机制

概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种:HTTP请求(Request)报文,报文格式为:请求行 – HTTP头(通用信息头,请求头,实体头) – 请…

彻底理解浏览器的缓存机制(http缓存机制)

一、概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种: 同步sau交流学习社区(首发):https://www.mwcxs.top/page/565.html。 1、HTTP请求…

HTTP缓存机制与原理详解

1.1 - 缓存 缓存可以重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞&#xff0c;进而减少显示某个资源所用的时间。借助 HTTP 缓存&#xff0c;Web 站点变得更具有响应性。缓存分为两点&#xff1a;强制缓存和协商缓存 1.2 - 强制缓存 概念…

浏览器缓存机制(HTTP缓存机制)

不废话&#xff0c;直接上干货&#xff0c;配图解说 首先浏览器首次请求一个网站&#xff0c;网站除了会返回我们需要资源&#xff0c;同时也会返回一些标识信息&#xff0c;这些标识信息约定了客户端和服务端的一些操作&#xff0c;这里列举重要的&#xff1a; 1.cache-contr…

HTTP的缓存机制

前面的话 缓存机制可以有很多种&#xff1a;比如客户端缓存、服务端缓存、代理服务器缓存等。 而本文主角HTTP的缓存是浏览器缓存。为什么这么说&#xff0c;下面来详细介绍一下。 HTTP缓存分类 HTTP缓存可以分为强缓存 与协商缓存。 强制缓存 当缓存数据库中已经有所请求…

HTTP 缓存机制详解

文章目录 HTTP Cache什么是 HTTP Cache关键字简单流程图代码准备不设置明确禁止缓存private与public缓存过期策略1、三种方式设置服务器告知浏览器缓存过期时间2、两种方式校验资源过期 强制校验缓存性能优化期中总结&#xff1a;HTTP 缓存性能检查清单前端工程化参考附代码 HT…

HTTP缓存机制与CDN

前提&#xff1a;周末看视频了解到一个关键词&#xff0c;http缓存&#xff0c;然后顺带这了解了一下cdn web应用程序的缓存大致分为数据库缓存&#xff0c;服务器端缓存&#xff08;redis以及CDN 等缓存&#xff09;、本地缓存。 本地缓存还包含很多内容&#xff1a;http缓存&…

浏览器http缓存机制

1、前言 前端缓存主要是分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存&#xff0c;主要在服务器代码上设置;而浏览器缓存则主要由前端开发在前端js上进行设置。 http缓存是web缓存的核心&#xff0c;是最难懂的那一部分,也是最重要的那一部分。 2、H…

Http缓存机制与原理

一 Http缓存基本概念 1.1 Http报文 在浏览器和服务器进行Http通信时发送的数据即为Http报文&#xff0c;其中分为两部分&#xff1a; header - 报文的首部或头部&#xff0c;其中保存着各类请求的属性字段&#xff0c;关于Http的缓存相关规则信息均保存在header中body - 请求…

前端基础-浏览器缓存/HTTP缓存机制(面试常考)

文章目录 一、HTTP报文1.HTTP请求(Request)报文2.HTTP响应(Response)报文 二、缓存过程分析三、缓存规则1.强制缓存1.1Expires1.2 Cache-Control1.3例子 2. 缓存存储3.协商缓存3.1 Last-Modified / If-Modified-Since3.2 Etag / If-None-Match 四、不同刷新的请求执行过程五、总…

一文理解http缓存机制

HTTP报文 浏览器的缓存机制也就是我们所说的HTTP缓存机制&#xff0c;是根据HTTP报文的缓存标识进行的。先了解下HTTP报文&#xff1a; 请求报文 报文格式&#xff1a;请求行 – 请求头(通用信息头&#xff0c;请求头&#xff0c;实体头) – 请求体(只有POST才有请求体) 响…

http缓存机制

http缓存机制 1. 什么是缓存2. 缓存主要目的3. http缓存概述3.1 强缓存3.2 协商缓存 1. 什么是缓存 缓存&#xff08;cache&#xff09;是数据交换的缓冲区&#xff0c;是临时存储数据的仓库&#xff0c;在有大量数据交换的应用程序中&#xff0c;我们会采取一些方式将那些实时…

HTTP缓存机制及原理详解(最全)

前言 缓存技术是无数WEB开发从业人员在工作过程中不可避免的一大问题。在产品开发的时候我们总是想办法避免缓存产生&#xff0c;而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理&#xff0c;是开发WEB应用的基础&#xff0c;本文着眼于此&a…

HTTP缓存机制详解

HTTP缓存机制详解 一. 前言二. 缓存的介绍什么是缓存&#xff1f;为什么要使用缓存&#xff1f;1. 减少冗余的数据传输2. 缓解带宽瓶颈3. 破坏瞬间拥塞4. 降低距离时延 三. 缓存有效性命中和未命中的再验证命中率字节命中率区分响应来自缓存还是服务器 四. 缓存拓扑结构私有缓存…

redis消息订阅与发布

一、消息订阅与发布 消息的订阅和发布是进程间的一种消息通信模式&#xff0c;发送者(pub)发送消息&#xff0c;订阅者(sub)接收消息。 二、常用命令示例 先订阅后发布&#xff0c;才能收到消息 执行SUBSCRIBE可以一次性订阅多个 执行PUBLISH命令&#xff0c;发布消息 …