Open Adamwu1992 opened 5 years ago
demo
🕵️♂️这块内容,目前看来没有比较正确的答案呀
demo
我查阅了关于 preload 的文档,关于缓存的部分还没有被明确定义。
Conceptually, a preloaded response ought to be committed to the HTTP cache, as it is initiated by the client, and also be available in the memory cache and be re-usable at least once within the lifetime of a fetch group.
其中提到的在一个 fetch group 声明周期内,preload 回的资源至少被重用一次才是它最重要的使用场景,至于刷新 tab 后资源从哪里获取,据我观察 preload 目前还是遵循的 http 缓存语义。
现在我是这么理解的,
所有的资源
第一次加载后,都是存在 memory cache 里面的;浏览器然后,根据 http cache 策略(强缓存/协商缓存),判断某个资源是否要 写入 disk cache;
Memory Cache
内存缓存(
Memory Cache
)是一个巨大的资源容器,渲染引擎(renderer
)在渲染当前文档期间抓取的所有的资源都储存在其中,并且在文档生命周期内一直存在。但是
Memory Cache
是一个短期缓存,它只会在下一个导航前保存这些缓存,有些情况下可能更短。有很多用情况你请求的资源已经被缓存在
Memory Cache
中了:Preloader
)获取。如果你的请求是由HTML解析器创建DOM时创建的,那么很有可能在Preloader
的HTML标记化阶段就已经获取到了。<link rel=preload>
)指令。img
标签引用同一个图片资源,后面的标签请求的资源就会在Memory Cache
中。但是
Memory Cache
不会轻易的命中一个请求,除了要有匹配的URL,还要有相同的资源类型、CORS模式以及一些其他特性。Memory Cache
是不关心HTTP语义的,比如Cache-Control: max-age=0
的资源,仍然可以在同一个导航中被重用。但是在特定的情况下,Memory Cache
会遵守Cache-Control: no-store
指令,不缓存相应的资源。Service Worker
和
Memory Cache
不同的是Service Worker
没有任何预设的规则,它完全取决于开发者如何设置它。Service Worker
和Memory Cache
主要的区别就是它是持久化的,即使tab页关闭或者浏览器重启,保存在Service Worker
缓存里的资源不会消失。一种删除
Service Worker
缓存的方法是使用JS代码,cache.delete(resource)
;还有一种导致缓存被删除的情况是触发了系统的存储空间上限,此时页面的Service Worker
缓存连同indexedDB
,localStorage
等都会一起被回收掉。Service Worker
仅仅在某个限定的作用域内生效,大多数情况下仅对单个host内的文档发起的请求生效。HTTP Cache
HTTP Cache
也被叫做Disk Cache
。首先,
HTTP Cache
是持久化的,并且允许跨session甚至是跨站点地重用。如果一个资源被一个站点缓存在HTTP Cache
中,另一个站点如果有相同的请求,是可以重用的。其次,
HTTP Cache
是遵循HTTP语义的。它总是会储存最新的资源,验证需要被验证的资源,拒绝储存它不应该储存的资源,这些都是由资源的响应头决定的。既然它是一个持久化的缓存,就需要某种机制去删除缓存。和
Service Worker
不同的是它可以逐条删除,当浏览器需要空间去储存更加新鲜或者更加重要的缓存的时候,旧的缓存就会被删除。HTTP Cache
有一个基于缓存的组件,用来匹配请求的资源是否命中它已有的缓存资源,如果有发现命中的资源,它需要从硬盘里取获取这个资源,这是一个昂贵的操作。Push Cache
Push Cache
是HTTP/2推送的资源存储的地方。它是HTTP/2会话的一部分。如果HTTP/2会话关闭了,储存在其中的资源都会消失。从不同的会话发起的请求将不会命中Push Cache
中的资源。所有未被使用的资源在Push Cache
会储存优先的时间(Chromium浏览器大约5分钟)。Push Cache
根据请求的URL以及请求表头来匹配资源,但是不是严格遵守HTTP语义的。如果一个请求命中了
Push Cache
里的资源,那么这个资源将会从Push Cache
里移除,然后经过HTTP Cache
时,会保留一份拷贝缓存下来,再经过Service Worker
(如果有)时,也会保留一份拷贝储存下来,最后请求的资源回到渲染引擎时,Memory Cache
会存储一份对该资源的引用,如果将来本导航会话中的相同的资源请求,这份引用就可以直接被分配给该请求。参考