本知識頁參考：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