前端--缓存架构

缓存架构

今天所说的缓存是针对于api数据的缓存。缓存实际上有两个方面的缓存：
1、api数据的缓存
2、资源的缓存：前端的话无需要太多关心的，因为html+css+js在没有设置特殊请求头的情况下，浏览器是默认缓存的

优化三字经：快、小、省

快

1、选择更快的api
2、算法层面--尽量减少自己的操作步骤

小--说的其实是请求资源

1、通过webpack压缩，例如：tree-shaking----（治标不治本）
2、尽量不要去写无用（重复）的代码----（治本）

从vue3层面谈一下快和小

快方面：

1、api方面：vue3把完成响应式的方案defineProty转变成proxy
说明：defineProty是针对于对象的api，针对于一个对象的属性去更改权限标签，要想将data里面定义的数据触发响应式的，就得为data里面所有的数据通过defineProty去定义get和set，必须去for in data去遍历，如果data的数据特别多的话，会非常耗时的；
proxy是代理整个对象，所以没必要去查找data里面的每个对象，直接把data代理就好，不需要for...in循环；
proxy是不会改变原对象的，defineProty是改变原对象的
2、算法方面：Diff算法
Diff算法是vue一个很重要的东西（核心），用来对比新老Dom，从而产生更新；
在vue2里面，每个dom是逐层逐个比对的
例如：

<div>
    <h1>123</h1>
    <p>{{msg}}</p>
</div>

在vue2中，比对顺序是，先比对div，然后比对h1，再比对p，实际上，h1是没必要去比对的，它永远不会改变的，只有写了vue指令的p会发生变化的；
在vue3中，会首先分析出那些是绑定了vue指令的（会发生变化），只会去比对这些绑定了动态指令的，减少了需要去比对的数量，从而减少了运行/编码耗时，速度会变快很多；

小方面：

vue3拥抱了tree-shaking
vue2是把所有的属性（mounted，methods）都是挂载在原型链上的，在开发的过程中，我们实际上用的api是40%-50%的，但是会把其余没有用到的api打包到我们的代码中。
vue3是函数式编程，我们在打包时，利用webpack的tree-shaking，将我们没用到的api删除，不会打包到我们的代码中，大大减少了打包后的代码体积。

省方面（减少请求等）

请求缓存思路

image.png

注意：
1、缓存架构要保障单一性（单一性，就像在vue实例中，保证只有一个vuex）

if(!window.mycache){
    window.mycache=xxx
}

判断window上是否已经挂载了我们定义的缓存架构，如果挂载了，将不再去挂载，否则的话就会挂载我们的缓存架构。
2、缓存区域的权限问题（外界区域不能操作缓存区域里面的内容）
1>写在匿名自调用函数里面

if(!window.mycache){
  window.mycache=(function(){
      ...
  })()
}

2>那怎样让其拿到or修改缓存区域里面的值呢？
为了解决这个问题，缓存区域利用闭包的原理；将缓存区域作为私有变量，存在匿名函数里面

if(!window.mycache){
    window.mycache=(function(){
        // 解决怎样让其拿到or修改缓存区域里面的值
        var cache = {}
        // return一些方法，去拿到or编辑缓存区域的数据
        return {
          get:function(){},
          set:function(){},
          ....
        }
    })()
}

if(!window.mycache){
    window.mycache=(function(){
        // 解决怎样让其拿到or修改缓存区域里面的值
        var cache = {}
        // return一些方法，去拿到or编辑缓存区域的数据
        return {
            get:function(api){
                // 如果有缓存，我们是个同步请求，但是如果没有请求，是个异步操作，那怎样解决这种情况呢？如果是异步，我们在接受时
                // 如果这样写：
                // res = window.mycache.get('api')
                // console.log(res) // 异步情况下，res是获取不到值得，会报错，我们将下面代码写在pormise中可解决
                // if(cache[api]){
                //     // 同步操作
                //     return cache[api]
                // }else{
                //     // 异步操作
                //     this.set(api).then(res=>{
                //         cache[api] = res
                //         return res
                //     })
                // }
                return new Promise((resolve,reject)=>{
                    if(cache[api]){
                        // 同步操作
                        resolve(cache[api])
                    }else{
                        // 异步操作
                        this.set(api).then(res=>{
                            cache[api] = res
                            resolve(res)
                        })
                    }
                })
                ///写成Promise后，我们接受返回结果时，只需要像下面这样去接受数据
                // window.mycache.get('api').then(res)=>{
                        // todo
                // }
              
            }，
            set:function(api){

            },
            remove:function(){

            }
        }
    })()
}

3>缓存得问题：
a：缓存更新的问题
如果是本地缓存，像localStorage，cookies等，里面的数据不会轻易改变，但是要是变了呢？怎样更新呢？
方法1）：webscoket，但是这种成本太大
方法2）：轮询的方式
像我们上面的例子，缓存是存于内存的，v8引擎，64位允许存1.4G，32位允许存700MB，所以要考虑溢出的情况。

if(!window.mycache){
    window.mycache=(function(){
        // 解决
        var cache = {}
        var cacheArr = []
        // return一些方法，去拿到or编辑缓存区域的数据
        return {
            get:function(api){
                // 如果有缓存，我们是个同步请求，但是如果没有请求，是个异步操作，那怎样解决这种情况呢？如果是异步，我们在接受时
                // 如果这样写：
                // res = window.mycache.get('api')
                // console.log(res) // 异步情况下，res是获取不到值得，会报错，我们将下面代码写在pormise中可解决
                // if(cache[api]){
                //     // 同步操作
                //     return cache[api]
                // }else{
                //     // 异步操作
                //     this.set(api).then(res=>{
                //         cache[api] = res
                //         return res
                //     })
                // }
                return new Promise((resolve,reject)=>{
                    if(cache[api]){
                        // 同步操作
                        resolve(cache[api])
                    }else{
                        // 异步操作
                        this.set(api).then(res=>{
                            // 解决缓存超出内存的问题 start
                            if(cacheArr.length > 10){
                                var _api = cacheArr.shift()
                                this.remove(_api)
                            }
                            // 解决缓存超出内存的问题 end
                            cache[api] = res
                            cacheArr.push(api)
                            resolve(res)
                        })
                    }
                })
                //写成Promise后，我们接受返回结果时，只需要像下面这样去接受数据
                // window.mycache.get('api').then(res)=>{
                        // ...
                // }
            }，
            set:function(api){

            },
            remove:function(){

            }
        }
    })()
}