Web缓存之浏览器缓存-http缓存

http请求设计

API设计:url中加vn表示版本,节点表示业务、http方法表示动作(GET\POST\PUT\DELETE)、响应码、状态码
拦截器:HttpInterceptor
包括以下功能:身份认证token、统一相应处理、异常解决

Web缓存

数据库缓存、服务端缓存(代理服务器缓存和CDN缓存)、浏览器端缓存、Web应用层缓存
http缓存就是Web缓存中的浏览器端缓存中的基于http协议实现的那一种,也是平时最常见的一种缓存。

http缓存过程

第一次请求

第二次请求

强制缓存

expires:服务器返回的到期时间,用在HTTP1.0,存在缓存命中误差。HTTP1.1中用Cache-Control替代
Cache-Control:private客户端缓存,public客户端和代理服务器缓存(对于FEdev,两者无区别)、max-age=xxx缓存内容在xxxs后失效,no-cache对比缓存进行缓存数据验证、no-store不缓存

对比缓存(协商缓存)

Last-Modified:第一次请求时,服务器返回的资源最后修改时间
If-Modified-Since:再次请求时,浏览器通知服务器,上次请求时返回资源最后修改时间
Etag:服务器响应请求时,返回资源唯一标识
If-None-Match:再次请求服务器时,通过此字段通知服务器客户段缓存数据的唯一标识。


强制缓存和对比缓存
缓存对比

对于强制缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行比较缓存策略。
对于比较缓存,将缓存信息中的Etag和Last-Modified通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存。
参考资料:
HTTP2简介和web优化
http缓存机制及原理
Angular中优雅编写http请求
Angular7 HttpClient处理多个请求
HttpClient高并发下性能优化-http连接池

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 网络特有的延迟以及数据传输的成本,制约互联网快速获取Web资源。为此,HTTP协议引入缓存以空间换时间,使浏览器缓...
    大头8086阅读 8,262评论 2 12
  • 浏览器对于请求资源, 流程如图所示: 可以看到浏览器的缓存机制分为两个部分: 1、当前缓存是否过期? 2、服务器中...
    zhoulujun阅读 4,974评论 0 3
  • 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,...
    浪里行舟阅读 208,300评论 46 521
  • ​ 豆瓣电影传送门 我是一名豆瓣爱好者,常常在豆瓣APP上面标记想看的电影,然后在有空的时候再去找资源看。豆瓣最近...
    Neulana阅读 5,814评论 0 12
  • 昨天本想引导儿子看看动画片以外的电视节目,可是儿子直接没兴趣,引导失败,算了,反正也快开学了,随他看吧。 ...
    苹果杭妈阅读 1,378评论 0 0

友情链接更多精彩内容