🍬浏览器缓存机制与分类
🍿*★,°*:.☆(￣▽￣)/$:*.°★* 🍿
🍟欢迎来到猫先生的csdn博文，本文主要讲解浏览器缓存机制与分类🍟
🥙前言
处理好浏览器缓存对提升系统的性能有很大的帮助，为什么要使用缓存，我们一般请求资源后直接使用，当我们再次请求资源时，还要继续从服务器拿到数据吗？答案不以为然，当第一次请求资源后，可以进行缓存，然后再次请求资源时可以直接从缓存中读取，提高了效率。
🥪浏览器缓存分类
浏览器的缓存分为了很多种，大概分为以下几类：
按缓存位置：memory cache， disk cache， Service Worker 等
按失效策略：Cache-Control，ETag等
我们在Network的Size中会看B、KB、M等，这些都是网络请求，而memory cache、disk cache等这些都是从缓存中读取。
浏览器请求的时候怎么进行缓存操作呢？具体如下：
操作的系统的一般都是先读内存，再读硬盘。请求资源遵循找到即返回，找不到则继续；优先级为：
- Service Worker
- memory cache（内存的缓存）
- disk cache（硬盘中的缓存）
- 网络请求
我们可以看到，有的是内存缓存，有的是硬盘缓存，那么两者有什么区别呢？
内存缓存(from memory cache)：内存缓存具有两个特点，分别是 快速读取和时效性：
- 快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。
- 时效性：一旦该进程关闭，则该进程的内存则会清空。
硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢
🌮按缓存位置分类
memory cache
memory cache 是内存中的缓存，它是浏览器为了加快读取缓存速度而进行的自身的优化行为。几乎所有网络请求都会自动加入到memory cache ，但是由于数量大和浏览器的占用内存不能无限扩大，故它属于短期存储。关闭浏览器tab便会失效；该页面的缓存占用内存超级多，则会在关闭tab前，排在前面的缓存便失效。
- 内存中的缓存
- 短期存储
- 网络请求几乎都会自动加入
preloader、preload
memory cache使用的话有两种方式.
- preloader
浏览器打开网页，先请求html，若有js、css等资源，会使用CPU资源进行解析并执行。之前是串行模式，即请求js/css-解析执行-请求下一个js/css-解析执行。我们会发现解析时候，网络请求是空闲的，使用preloader则可以在解析资源的同时，还能请求下一批资源 ，使用preloader请求来的资源会放到memory cache，供之后解析执行操作
- 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保存一份资源的引用
