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

还是用淘宝举例子

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

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

相关推荐
weixin_462446233 分钟前
nodejs 下使用 Prettier 美化单个 JS 文件(完整教程)
开发语言·javascript·ecmascript
Haooog14 分钟前
Docker面试题(不定时更新)
java·docker·面试
岭子笑笑22 分钟前
vant 4 之loading组件源码阅读
前端
feathered-feathered23 分钟前
Redis基础知识+RDB+AOF(面试)
java·数据库·redis·分布式·后端·中间件·面试
hxmmm26 分钟前
自定义封装 vue多页项目新增项目脚手架
前端·javascript·node.js
ETA826 分钟前
JS执行机制揭秘:你以为的“顺序执行”,其实是V8引擎在背后搞事情!
前端·javascript
鹏北海-RemHusband27 分钟前
微前端实现方式:HTML Entry 与 JS Entry 的区别
前端·javascript·html
a程序小傲37 分钟前
小红书Java面试被问:java创建对象有哪些方式?
java·开发语言·面试
行走的陀螺仪1 小时前
JavaScript 装饰器完全指南(原理/分类/场景/实战/兼容)
开发语言·javascript·ecmascript·装饰器
瘦的可以下饭了1 小时前
3 链表 二叉树
前端·javascript