你知道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状态码,告知浏览器直接使用缓存;否则返回新的资源内容。

还是用淘宝举例子

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

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

相关推荐
Myli_ing8 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维26 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
ifanatic27 分钟前
[面试]-golang基础面试题总结
面试·职场和发展·golang
I_Am_Me_40 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
程序猿进阶1 小时前
堆外内存泄露排查经历
java·jvm·后端·面试·性能优化·oom·内存泄露
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript