最全浏览器缓存机制与分类(一)_(from disk cache),2024最新大厂大数据开发面试真题解析

img
img

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

需要这份系统化资料的朋友,可以戳这里获取

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

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

对比缓存

对比缓存也叫做协商缓存,当强制缓存失效(超过规定时间),就会使用对比缓存,由服务器决定缓存内荣是否失效。
浏览器先请求缓存数据库,返回一个缓存标识。之后浏览器拿这个标识和服务器通讯。如果缓存未失效,则返回 HTTP 状态码 304 表示继续使用,于是客户端继续使用缓存;如果失效,则返回新的数据和缓存规则,浏览器响应数据后,再把规则写入到缓存数据库
对比缓存在请求数和没有缓存是一致的,但是返回304,返回的仅仅是状态码,没有实际的文件内容,因此 节省了响应体体积,缩短网络传输时间。 和强制缓存来说提升幅度较小。对比缓存有两种方式:

Last-Modified & If-Modified-Since

1 服务器用Last-Modified字段告知客户端资源最后一次被修改的时间

Last-Modified: Mon, 10 Nov 2018 09:10:11 GMT

  1. 浏览器储存这个值和内容
  2. 下一次请求相同资源时时,浏览器从自己的缓存中找出“不确定是否过期的”缓存。因此在请求头中将上次的 Last-Modified 的值写入到请求头的 If-Modified-Since 字段。
  3. 服务器会将 If-Modified-Since 的值与 Last-Modified 字段进行对比。如果相等,则表示未修改,响应 304;反之,则表示修改了,响应 200 状态码,并返回数据。

缺陷:

  • 资源更新速度以秒以下单位则会失效,因为它的时间单位最低为秒
  • 文件是服务器动态生成的,那么方法的更新时间永远都是生成时间,尽管文件未变化
Etag & If-None-Match

Etag & If-None-Match解决了上述问题。Etag 存储的是文件的特殊标识(一般都是 hash 生成的),服务器存储着文件的 Etag 字段。之后的流程和 Last-Modified 一致,只是 Last-Modified 字段和它所表示的更新时间改变成了 Etag 字段和它所表示的文件 hash,把 If-Modified-Since 变成了 If-None-Match。服务器同样进行比较,命中返回 304, 不命中返回新资源和 200。

  • Etag 的优先级高于 Last-Modified

🍔总结

  • 调用 Service Worker 的 fetch 事件响应
  • 查看 memory cache
  • 查看 disk cache。这里又细分:
    • 如果有强制缓存且未失效,则使用强制缓存,不请求服务器。这时的状态码全部是 200
    • 如果有强制缓存但已失效,使用对比缓存,比较后确定 304 还是 200
  • 发送网络请求,等待网络响应
  • 把响应内容存入 disk cache (如果 HTTP 头信息配置可以存的话)
  • 把响应内容 的引用 存入 memory cache (无视 HTTP 头信息的配置)
  • 把响应内容存入 Service Worker 的 Cache Storage (如果 Service Worker 的脚本调用了 cache.put())

本文参考:一文读懂前端缓存

img
img

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

需要这份系统化资料的朋友,可以戳这里获取

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

](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

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

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值