【前端】缓存相关

本知识页参考：https://zhuanlan.zhihu.com/p/586060532

1. 概述

1.1 应用场景

1. 静态资源
   1. 场景：图片、CSS、JS 文件等静态资源
   2. 实现：使用 HTTP 缓存控制头，或者利用 CDN 进行边缘缓存
2. 数据缓存
   1. 场景：请求的返回结果
   2. 实现：使用浏览器的本地存储（如 LocalStorage）、IndexedDB 或者第三方库/框架提供的缓存工具（如react-query）
3. 页面缓存
   1. 场景：用户访问过的页面内容，尤其是SPA应用
   2. 实现：Vue中可以利用 keep-alive 组件
      1. keep-alive定义：抽象组件，用于缓存组件实例、状态 - 而非销毁；实现状态保留避免重复渲染
         1. 提高性能，不必要的组件创建
         2. 不会渲染自己的DOM元素，也不会出现在组件链中
         3. 逻辑抽象
      2. 代码原理
         1. Vue2中（/Front/Note/封装框架知识/Vue/素材/Vue2特性.md）

         data() {
            return {
               cache: {}
            }
         },
         methods: {
            
         }
         

         2. Vue3中

         import { ref } from 'vue';
         export default {
            setup() {
               const cache
            }
         }
         

      3. 内部会使用缓存对象：Vue2-JS，Vue3-Map包裹实例
         1. 组件切到后台deactivated缓存，被激活activated时从缓存对象中恢复实例，而不是重新创建
         2. 更好的缓存模式
            1. include：指定哪些组件应该被缓存
               1. 接收字符串、数组或正则表达式作为参数，匹配组件的名称
                  1.
               2. 绑定数字类型
            2. exclude：哪些组件不应该被缓存
            3. max：限制被缓存的最大组件实例数
      4. keep-alive原理
         1. 核心功能：一是render()确定要缓存的vNode及对应组件实例；二是cacheVNode()存储刚要缓存的实例
         2. render()：Vue自带，不属于组件
            1. Vue自带的函数，不属于组件的methods。生成组件的虚拟DOM(VNode)，决定如何渲染
               1. KeepAlive：特殊的抽象组件，Vue.js用于缓存
               2. 缓存组件实例和状态
            2. Vue内部实现

            <!--英文逗号-->
            <KeepAlive include="a, b">
               <component :is="view" />
            </KeepAlive>
            <!--正则表达式-->
            <KeepAlive :include="/a|b/">
               <component :is="view" />
            </KeepAlive>
            <!--数组-->
            <KeepAlive :include="['a', 'b']">
               <component :is="view" />
            </KeepAlive>
            <!--限制最大缓存数为10-->
            <KeepAlive :max="10">
               <component :is="view" />
            </KeepAlive>
            

            3. 组件
         3. 局部作用域
            1.
4. Service Workers
   1. 场景：为了实现离线体验或加载提速，sw可以用来缓存应用的核心文件和数据
   2. 实现：Service Worker API 拦截请求并提供自定义的响应，从缓存中提供文件

1.2 缓存管理器

应用中设计一个缓存管理器，用来统一管理缓存的写入、读取和销毁等

1. 步骤
   Step 1：确定缓存类型，如静态资源、API 响应数据、应用程序状态等
   Step 2：缓存策略，包括规则（何时缓存数据、何时更新、何时过期）和机制（决定使用哪种存储机制，如 LocalStorage、IndexedDB、内存、Service Workers 等）
   Step 3：

2. 浏览器缓存

2.1 基本介绍

浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力

1.2