你知道HTTP缓存是什么吗?

HTTP缓存是什么

HTTP缓存是一种在Web浏览器和Web服务器之间减少数据传输并加快网页加载速度的技术。当浏览器请求一个网页时,服务器会返回该网页的内容以及指示浏览器如何处理该内容的缓存控制信息。这些信息包括缓存过期时间、验证令牌等。 如果浏览器已经缓存了页面的副本,并且该副本仍然有效(即未过期),浏览器可以直接从缓存中加载页面,而无需再次请求服务器。这样可以减少网络流量,提高页面加载速度,并降低服务器负载。

HTTP缓存分为两种

强缓存

当浏览器首次请求资源时,服务器会返回该资源的缓存规则,包括缓存过期时间等信息。浏览器会根据这些规则将资源缓存在本地,下次请求同一资源时,浏览器会先检查本地缓存的过期时间。若没过期则直接从本地缓存中获取资源信息,浏览器就不再向服务器重新请求资源,如过期则需重新发送请求,重新缓存资源,更新缓存时间。 那么如何查看缓存时间等信息呢? 看响应头中包含Cache-Control: max-ageExpires字段,

Expires

  1. Expires字段:

    • Expires字段是一个HTTP响应头字段,它指定了资源的过期时间,即资源在浏览器端的缓存有效期。
    • 该字段的值是一个日期时间,表示资源在此日期之后将过期。例如,Expires: Fri, 31 Dec 2024 23:59:59 GMT
    • 如果资源在过期时间之前被请求,浏览器会直接从缓存中获取资源。如果过期时间已经过去,浏览器会重新请求服务器获取最新的资源。
  2. Cache-Control(控制)字段:

    • Cache-Control字段是一个强大且灵活的缓存控制机制,可以通过多个指令来控制缓存行为。
    • Cache-Control的常见指令包括:
      • public:表明该资源可以被任何缓存(包括中间代理服务器)缓存。
      • private:表明该资源只能被单个用户缓存,不允许中间代理服务器缓存。
      • no-cache:浏览器在使用缓存前必须先向服务器验证资源是否过期,并且需要发送请求到服务器进行确认。
      • no-store:绝对禁止缓存,浏览器不缓存该资源的任何副本。
      • max-age:指定资源在缓存中的最大有效时间(以秒为单位)。
    • 通过使用适当的Cache-Control指令,服务器可以灵活地控制缓存行为,从而提高网页加载性能和用户体验。

注意:在Expires和Cache-Control(控制)两者同时存在时,Cache-Control(控制)的优先级更高,会覆盖Expires字段的设置。 如何查看

以淘宝网为例

第一次访问 刷新网页第二次 就会有状态码如下

协商缓存

协商缓存是指浏览器和服务器在强缓存失效的情况下,通过协商机制来确定是否使用缓存的一种缓存策略。在协商缓存中,浏览器会向服务器发送请求,并在请求头中携带相关的验证信息,服务器根据这些信息来判断是否需要返回最新的资源或告知浏览器直接使用本地缓存。

协商缓存主要有两种方式:Last-Modified/If-Modified-SinceETag/If-None-Match

  1. Last-Modified/If-Modified-Since
    • 当浏览器请求资源时,服务器会在响应头中返回资源的最后修改时间(Last-Modified)。
    • 浏览器在接收到响应后,会将该时间保存起来,并在下次请求同一资源时,在请求头中加上If-Modified-Since字段,值为上次返回的最后修改时间。
    • 服务器接收到带有If-Modified-Since字段的请求后,会将资源的最后修改时间与该字段进行比较,如果资源的最后修改时间晚于If-Modified-Since字段所表示的时间,则返回新的资源内容;否则返回304 Not Modified状态码,告知浏览器直接使用缓存。
  2. ETag/If-None-Match
    • 当浏览器请求资源时,服务器会在响应头中返回资源的唯一标识符(ETag)。
    • 浏览器在接收到响应后,会将该唯一标识符保存起来,并在下次请求同一资源时,在请求头中加上If-None-Match字段,值为上次返回的ETag。
    • 服务器接收到带有If-None-Match字段的请求后,会将资源的当前ETag与该字段进行比较,如果两者匹配,则返回304 Not Modified状态码,告知浏览器直接使用缓存;否则返回新的资源内容。

还是用淘宝举例子

通过协商缓存机制,浏览器和服务器可以在保证数据一致性的前提下,减少不必要的网络传输,提高性能和节省带宽。协商缓存是强缓存失效后的一种重要的缓存策略,可以有效降低服务器负载并提升用户体验。

文章到这里就结束了,谢谢大家,希望对你有所帮助。

相关推荐
掘金者阿豪1 小时前
把业务数据变成共享仪表盘:Metabase可视化与远程访问实践
前端·后端
kyriewen1 小时前
折腾了半年 AI 编程工作流,最后发现效率瓶颈是桌上那块屏幕
前端·javascript·ai编程
蜗牛前端2 小时前
codex 全流程开发上线的高颜值礼簿小程序
前端·微信小程序
大龄秃头程序员2 小时前
我在图文流 App 里落地双层缓存、弱网降级与 OOM 治理
前端
老王以为2 小时前
React Renderer 分离的多平台架构
前端·react native·react.js
hunterandroid2 小时前
Kotlin Coroutines 与 Flow:让异步任务更清晰
前端
Bigger3 小时前
从零搭建 AI 代码审查服务:一份前端也能看懂的 Python 学习笔记
前端·ci/cd·ai编程
lichenyang4533 小时前
JSAPI、NAPI、Biz、Imp:ASCF Demo 如何真正调用系统能力和 C++ 能力
前端
自由路飞3 小时前
RAG 混合检索深挖:BM25 和向量分数为什么不能直接相加?
面试
lichenyang4533 小时前
IPC、JSVM、UIThread、libuv:ASCF 架构图里最容易混的几个词
前端