【前端】缓存相关

本知识页参考：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