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

还是用淘宝举例子

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

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

相关推荐
京东零售技术几秒前
京东小程序JS API仓颉改造实践
前端
奋飛9 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟9 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游13 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte18 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟26 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor27 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter28 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝29 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽30 分钟前
Cookie、Session、JWT 的前世今生
前端