【前端】缓存相关

本知识页参考: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)
        js 复制代码
        data() {
           return {
              cache: {}
           }
        },
        methods: {
           
        }
        1. Vue3中
        js 复制代码
        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内部实现
          js 复制代码
          <!--英文逗号-->
          <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>
          1. 组件
        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

相关推荐
德育处主任8 分钟前
p5.js 入门:用 point () 绘制点的超简单教程
前端·javascript·canvas
雪*夹雨夹*雪21 分钟前
CPU 为什么需要缓存?揭开速度与效率的底层逻辑
缓存
yume_sibai26 分钟前
Vue 插槽
前端·javascript·vue.js
O败者食尘D1 小时前
【Vue2】结合chrome与element-ui的网页端条码打印
前端·vue.js·chrome
love530love1 小时前
Windows 如何更改 ModelScope 的模型下载缓存位置?
运维·人工智能·windows·python·缓存·modelscope
szx04271 小时前
缓存HDC内容用于后续Direct2D绘制.
c++·缓存·directx·d2d·direct2d·dx·gdi+dx
橘颂TA2 小时前
【C++】C++11特性的介绍和使用(第三篇)
前端·c++·算法·c++11
爷_8 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee4410 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro11 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs