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

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

HTTP缓存机制分为两种,客户端缓存服务端缓存,本文主要对客户端缓存进行简单的分析。

服务端缓存

服务端缓存又分为 代理服务器缓存 和 反向代理服务器缓存(也叫网关缓存,比如 Nginx反向代理、Squid等),其实广泛使用的 CDN 也是一种服务端缓存,目的都是让用户的请求走”捷径“,并且都是缓存图片、文件等静态资源。

客户端缓存

客户端侧缓存一般指的是浏览器缓存,目的就是加速各种静态资源的访问,想想现在的大型网站,随便一个页面都是一两百个请求,每天 pv 都是亿级别,如果没有缓存,用户体验会急剧下降、同时服务器压力和网络带宽都面临严重的考验。

客户端缓存主要是HTTP协议定义的缓存机制(如 Expires, Cache-Control字段), 也有非HTTP协议定义的缓存,使用HTTP-MATE标签

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。使用上很简单,但只有部分浏览器可以支持,而且所有缓存代理服务器都不支持,因为代理不解析HTML内容本身。

Expires策略

Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。
这里写图片描述

Date头域表示消息发送的时间,时间的描述格式由rfc822定义。例如,Date: Mon,31 Dec 2001 04:25:57GMT。

Web服务器告诉浏览器在2012-11-28 03:30:01这个时间点之前,可以使用缓存文件。发送请求的时间是2012-11-28 03:25:01,即缓存5分钟。

不过Expires 是HTTP 1.0的东西,现在默认浏览器均默认使用HTTP 1.1,所以它的作用基本忽略。

Cache-Control策略

Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多,设置更细致,如果同时设置的话,其优先级高于Expires。

HTTP-Header中的Cache-Control字段:

可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

各个消息中的指令含义如下:

  • public指示响应可被任何缓存区缓存。

  • private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。

  • no-cache指示请求或响应消息不能缓存

  • no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

  • max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。

  • min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

  • max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

这里写图片描述

还是上面那个请求,web服务器返回的Cache-Control头的值为max-age=300,即5分钟(和上面的Expires时间一致,这个不是必须的)。

需配合Cache-Control使用的字段

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用。

  • Last-Modified:标示这个响应资源的最后修改时间。web服务器在响应请求时,告诉浏览器资源的最后修改时间。

  • If-Modified-Since:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Last-Modified声明,则再次向web服务器请求时带上头 If-Modified-Since,表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),HTTP 200;若最后修改时间较旧,说明资源无新修改,则响应HTTP 304 (无需包体,节省浏览),告知浏览器继续使用所保存的cache。

Etag/If-None-Match

Etag/If-None-Match也要配合Cache-Control使用。

  • Etag:web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器觉得)。Apache中,ETag的值,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的。

  • If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match (Etag的值)。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对,决定返回200或304。

既生Last-Modified何生Etag?

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

  • Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间

  • 如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存

  • 有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304。

用户行为缓存

用户操作Expires/Cache-ControlLast-Modified/Etag
地址栏回车有效有效
页面链接跳转有效有效
新开窗口有效有效
前进、后退无效有效
Ctrl+F5刷新无效无效

HTTP请求流程图

浏览器的第一次请求
这里写图片描述


浏览器再次请求时

这里写图片描述

ref: http://www.cnblogs.com/skynet/


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

相关文章

【浏览器】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;发布消息 …

redis发布与订阅

一、什么是发布和订阅 发布订阅是一种应用程序&#xff08;系统&#xff09;之间通讯&#xff0c;传递数据的技术手段。特别是在异构&#xff08;不同语言&#xff09;系统之间作用非常明显。发布订阅可以是实现应用&#xff08;系统&#xff09;之间的解耦合。 发布订阅&…