浏览器缓存机制与分类(一)_(from disk cache),2024年最新【干货】

先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7

深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年最新大数据全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
img
img
img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

如果你需要这些资料,可以添加V获取:vip204888 (备注大数据)
img

正文

🥙前言

处理好浏览器缓存对提升系统的性能有很大的帮助,为什么要使用缓存,我们一般请求资源后直接使用,当我们再次请求资源时,还要继续从服务器拿到数据吗?答案不以为然,当第一次请求资源后,可以进行缓存,然后再次请求资源时可以直接从缓存中读取,提高了效率。

🥪浏览器缓存分类

浏览器的缓存分为了很多种,大概分为以下几类:
按缓存位置:memory cachedisk cacheService Worker
按失效策略:Cache-ControlETag
我们在Network的Size中会看B、KB、M等,这些都是网络请求,而memory cachedisk cache等这些都是从缓存中读取。
在这里插入图片描述

浏览器请求的时候怎么进行缓存操作呢?具体如下:

在这里插入图片描述

操作的系统的一般都是先读内存,再读硬盘。请求资源遵循找到即返回,找不到则继续;优先级为:

  1. Service Worker
  2. memory cache(内存的缓存)
  3. disk cache(硬盘中的缓存)
  4. 网络请求

我们可以看到,有的是内存缓存,有的是硬盘缓存,那么两者有什么区别呢?
内存缓存(from memory cache):内存缓存具有两个特点,分别是 快速读取和时效性:

  • 快速读取:内存缓存会将编译解析后的文件,直接存入该进程的内存中,占据该进程一定的内存资源,以方便下次运行使用时的快速读取。
  • 时效性:一旦该进程关闭,则该进程的内存则会清空。

硬盘缓存(from disk cache):硬盘缓存则是直接将缓存写入硬盘文件中,读取缓存需要对该缓存存放的硬盘文件进行I/O操作,然后重新解析该缓存内容,读取复杂,速度比内存缓存慢 。

🌮按缓存位置分类

memory cache

memory cache 是内存中的缓存,它是浏览器为了加快读取缓存速度而进行的自身的优化行为。几乎所有网络请求都会自动加入到memory cache ,但是由于数量大和浏览器的占用内存不能无限扩大,故它属于短期存储。关闭浏览器tab便会失效;该页面的缓存占用内存超级多,则会在关闭tab前,排在前面的缓存便失效。

  • 内存中的缓存
  • 短期存储
  • 网络请求几乎都会自动加入
preloader、preload

memory cache使用的话有两种方式.

  1. preloader
    浏览器打开网页,先请求html,若有js、css等资源,会使用CPU资源进行解析并执行。之前是串行模式,即请求js/css-解析执行-请求下一个js/css-解析执行。我们会发现解析时候,网络请求是空闲的,使用preloader则可以在解析资源的同时,还能请求下一批资源 ,使用preloader请求来的资源会放到memory cache,供之后解析执行操作
  2. preload
    显式的预加载资源,也会放到memory cache。比如<link rel="preload"></link>
    memory cache保证了页面中两个相同请求,都实际请求最多一次,比如(两个src相同的<img>,两个href相同的<link>),匹配缓存时,不仅匹配相同的url,还会比较他们的类型、CORS中的域名规则等。脚本(script)类型被缓存的资源是不能用在(image)类型的请求中,即使他们的src相等。

disk cache

disk cache 也叫做HTTP cache,属于硬盘上的缓存,允许跨会话,跨站点情况使用,比如;两个站点使用一张图片,持久存储在文件系统。通过HTTP头部信息判断资源是否缓存、是否仍可用,是否过时重新请求。比读取内存慢些,绝大部分缓存都来自disk cache。

  • 持久存储
  • 跨站点、快会话
  • HTTP头部判断

Service Worker

Service Worker 是由开发者编写的额外的脚本,且缓存位置独立,出现也较晚,使用还不算太广泛。memory cache与disk cache都是通过浏览器内部判断,Service Worker可以直接操作缓存,储存在Application中的Cache Storage 。关闭浏览器或者tab缓存依然存在。除非手动调用cache.delete(resource)或者容量超出限制,被浏览器全清空。
Service Worker没能命中缓存,则会用fetch()方法继续获取资源,此时memory cache或者disk cache进行下一次找缓存工作。Service Worker 的 fetch() 方法获取的资源,即便它并没有命中 Service Worker 缓存,甚至实际走了网络请求,也会标注为 ServiceWorker缓存。
在这里插入图片描述

网络请求

为了提升之后请求的缓存命中率,自然要把这个资源添加到缓存中去。

  • 根据 Service Worker 中的 handler 决定是否存入 Cache Storage (额外的缓存位置)
  • 根据HTTP头部字段(Cache-control,Pragma等)决定是否加入disk cache
  • preloader、preload保存一份资源的引用

🍰按失效策略分类

强缓存

当客户端请求时,先访问缓存数据库看缓存是否存在,存在直接返回,不存在,请求真实服务器,响应后加入到缓存数据库。
强缓存,直接减少了请求数,是提升最大的缓存策略。 它的优化覆盖率请求数据的三个步骤。如果考虑缓存来优化页面性能,则强缓存应该被首选。
实现方式有两种:ExpiresCache-contrl

Expires

这个是HTTP1.0字段,表示缓存到期时间,是绝对时间(当前时间+缓存时间),在响应消息头设置后,在未过期之前步需要再次请求。但是弊端很大:

Expires: Thu, 10 Nov 2017 08:45:11 GMT

  • 修改本地时间、时差等都会造成客户端与服务端时间不一致
  • 写法复杂
Cache-contrl

表示缓存的最大有效时间,该时间为相对时间。

Cache-control: max-age=2592000

  • max-age:即最大有效时间
  • must-revalidate:如果超过了 max-age 的时间,浏览器必须向服务器发送请求,验证资源是否还有效。
  • no-cache:虽然字面意思是“不要缓存”,但实际上还是要求客户端缓存内容的,只是是否使用这个内容由后续的对比来决定。
  • no-store: 真正意义上的“不要缓存”。所有内容都不走缓存,包括强制和对比。
  • public:所有的内容都可以被缓存 (包括客户端和代理服务器, 如 CDN)
  • private:所有的内容只有客户端才可以缓存,代理服务器不能缓存。默认值。
    max-age到期应该重新验证,no-cache是必须验证,(max-age,must-revalidate等价于no-cache),Cache-control优先级高于Expires

对比缓存

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化的资料的朋友,可以添加V获取:vip204888 (备注大数据)
img

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

朋友,可以添加V获取:vip204888 (备注大数据)**
[外链图片转存中…(img-DFCjaHdj-1713414377528)]

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值