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

还是用淘宝举例子

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

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

相关推荐
zqx_715 分钟前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己32 分钟前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称1 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色1 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2342 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河2 小时前
CSS总结
前端·css
NiNg_1_2342 小时前
Vue3 Pinia持久化存储
开发语言·javascript·ecmascript
读心悦2 小时前
如何在 Axios 中封装事件中心EventEmitter
javascript·http
BigYe程普2 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
神之王楠2 小时前
如何通过js加载css和html
javascript·css·html