HTTP缓存浅析与应用🔥

简介: HTTP缓存浅析与应用🔥

1、原理:


在首次请求后,保存一份请求资源的响应副本,当用户再次发起相同请求后,如果判断缓存命中,则拦截请求,将之前存储的相应副本返回给用户,从而避免重新向服务器发起资源请求。


2、缓存的技术种类:


代理缓存,浏览器缓存,网关缓存,负载均衡器,内容分发网络

它们大致可以分为两类: 共享缓存,私有缓存


  • 共享缓存:缓存的内容可以被多个用户使用。如公司内部架设的内部Web代理
  • 私有缓存:只能单独被用户使用的缓存。如浏览器缓存


3、禁止缓存


发送如下响应头可以关闭缓存。此外,可以参考ExpiresPragma消息头。


Cache-Control: no-store


4、http缓存可分为强制缓存和协商缓存


  • 强制缓存不用判断缓存是否过期,可以直接使用。
  • 协商缓存每次都要询问一下服务器,看一下内容有没有更新,如果没有更新就使用缓存中的资源,如果更新了就继续请求


响应头设置:

image.png

4.1、cache-control(http1.1)


cache-control属性值:

  • no-cache  强制进行协商缓存
  • no-store 不缓存
  • max-age   表示缓存的过期时长
'cache-control': 'max-age=5' // 滑动时间,单位是秒
  • private, public: 用以明确响应资源是否可以被代理服务器缓存。
  • private  只能被浏览器缓存
  • public  响应资源既可以被浏览器私有缓存,又可以被代理服务器公共缓存
cache-control: public, max-age=10;

image.pngimage.pngimage.png


last-modified: ''
if-modified-since:
cache-control: no-cache


原理:是根据资源最后的修改时间来判断是否需要读取缓存


根据时间判断有局限性,比方说只改变文件命名,也会引起资源修改时间发生变化,但是对资源本身并没有改动


4.2、✨补充的方案是ETag(根据文件资源生成指纹)


  • 安装
npm i etag
  • 使用
const etag = require('etag')
const data = fs.readFilSeync('./img/04.jpg')
const etagContent = etag(data)
const ifNoneMatch = req.headers['if-none-match']
if (ifNoneMatch === etagContent) {
  res.statusCode = 304
  res.end()
  return // 直接返回,不操作服务器资源,减少带宽
}
res.setHeader('etag', etagContent)
res.setHeader('Cache-Control','no-cache')
res.end(data)


  • If-None-Match
  • 强验证Etag,资源细微的改动都会引起指纹的变化
  • 弱验证ETag, 相对灵活的过滤资源的某些变化


5、强缓存


介绍:


不会向服务器发送请求,直接从缓存中读取资源,在chrome控制台的Network选项中可以看到该请求返回200的状态码,并且Size显示from disk cachefrom memory cache


设置:


强缓存可以通过设置两种 HTTP Header 实现,分别是:ExpiresCache-Control


Expires 是http1.0的产物,Cache-Control是http1.1的产物,两者同时存在的话,Cache-Control优先级高于Expires;


6、协商缓存


介绍:


协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程,主要有以下两种情况:


  • 协商缓存生效,返回304Not Modified
  • 协商缓存失效,返回200请求结果


设置:


协商缓存可以通过设置两种 HTTP Header 实现, 分别是:Last-ModifiedETag


7、缓存机制🎉


  1. 强制缓存优先于协商缓存进行,若强制缓存(Expires和Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)


  1. 协商缓存由服务器决定是否使用缓存,若协商缓存失效,那么代表该请求的缓存失效,返回200,重新返回资源和缓存标识,再存入浏览器缓存中;生效则返回304,继续使用缓存。


8、缓存策略树🎉


image.png

缓存策略树,很早很早之前画的🤣,现在看看也是醉了😂

image.png

该图来源网络,侵删


目录
相关文章
|
1月前
|
JSON Java Apache
非常实用的Http应用框架,杜绝Java Http 接口对接繁琐编程
UniHttp 是一个声明式的 HTTP 接口对接框架,帮助开发者快速对接第三方 HTTP 接口。通过 @HttpApi 注解定义接口,使用 @GetHttpInterface 和 @PostHttpInterface 等注解配置请求方法和参数。支持自定义代理逻辑、全局请求参数、错误处理和连接池配置,提高代码的内聚性和可读性。
130 3
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
58 3
|
22天前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
23 5
|
1月前
|
缓存 安全 网络安全
HTTP/2与HTTPS在Web加速中的应用
HTTP/2与HTTPS在Web加速中的应用
|
29天前
|
缓存 NoSQL PHP
Redis作为PHP缓存解决方案的优势、实现方式及注意事项。Redis凭借其高性能、丰富的数据结构、数据持久化和分布式支持等特点,在提升应用响应速度和处理能力方面表现突出
本文深入探讨了Redis作为PHP缓存解决方案的优势、实现方式及注意事项。Redis凭借其高性能、丰富的数据结构、数据持久化和分布式支持等特点,在提升应用响应速度和处理能力方面表现突出。文章还介绍了Redis在页面缓存、数据缓存和会话缓存等应用场景中的使用,并强调了缓存数据一致性、过期时间设置、容量控制和安全问题的重要性。
39 5
|
1月前
|
缓存 NoSQL 数据库
运用云数据库 Tair 构建缓存为应用提速,完成任务得苹果音响、充电套装等好礼!
本活动将带大家了解云数据库 Tair(兼容 Redis),通过体验构建缓存以提速应用,完成任务,即可领取罗马仕安卓充电套装,限量1000个,先到先得。邀请好友共同参与活动,还可赢取苹果 HomePod mini、小米蓝牙耳机等精美好礼!
|
1月前
|
缓存 安全 前端开发
HTTP 协议的请求方法在实际应用中有哪些注意事项?
【10月更文挑战第29天】HTTP协议的请求方法在实际应用中需要根据具体的业务场景和需求,合理选择和使用,并注意各种方法的特点和限制,以确保网络通信的安全、高效和数据的一致性。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
37 3
|
1月前
|
网络协议 前端开发 API
HTTP 和 TCP 协议的应用场景有哪些不同
【10月更文挑战第25天】HTTP(超文本传输协议)和 TCP(传输控制协议)处于网络协议栈的不同层次,各自具有独特的功能和特点,因此它们的应用场景也存在明显的差异。
|
2月前
|
存储 缓存 数据库
缓存技术有哪些应用场景呢
【10月更文挑战第19天】缓存技术有哪些应用场景呢