缓存架构
今天所说的缓存是针对于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(){
}
}
})()
}
网友评论