详解JavaScript 中的批处理和缓存


Posted in Javascript onNovember 19, 2020

场景

最近在生产环境遇到了下面这样一个场景:
后台在字典表中存储了一些之前需要前后端共同维护的枚举值,并提供根据 type/id 获取字典的 API。所以在渲染列表的时候,有很多列表的字段直接就是字典的 id,而没有经过后台的数据拼装。

起初,吾辈解决问题的流程如下

  1. 确定字典字段,添加转换后的对象类型接口
  2. 将对象列表进行转换得到其中字典字段的所有值
  3. 对字典 id 列表进行去重
  4. 根据 id 列表从后台获取到所有的字典数据
  5. 将获得的字典数据转换为 id => 字典 的 Map
  6. 遍历最初的列表,对里面指定的字典字段进行转换

可以看到,上面的步骤虽然不麻烦,但却十分繁琐,需要定义额外的类型不说,还很容易发生错误。

思路

  • 使用 异步批处理 + LRU 缓存 优化性能
  • 支持异步 formatter 获得更好的使用体验

实现异步批处理

参考实现:

import { wait } from '../async/wait'

/**
 * 将多个并发异步调用合并为一次批处理
 * @param handle 批处理的函数
 * @param ms 等待的时长(时间越长则可能合并的调用越多,否则将使用微任务只合并一次同步执行的所有调用)
 */
export function batch<P extends any[], R extends any>(
 handle: (list: P[]) => Promise<Map<P, R | Error>>,
 ms: number = 0,
): (...args: P) => Promise<R> {
 //参数 => 结果 映射
 const resultCache = new Map<string, R | Error>()
 //参数 => 次数的映射
 const paramCache = new Map<string, number>()
 //当前是否被锁定
 let lock = false
 return async function (...args: P) {
  const key = JSON.stringify(args)
  paramCache.set(key, (paramCache.get(key) || 0) + 1)
  await Promise.all([wait(() => resultCache.has(key) || !lock), wait(ms)])
  if (!resultCache.has(key)) {
   try {
    lock = true
    Array.from(
     await handle(Array.from(paramCache.keys()).map((v) => JSON.parse(v))),
    ).forEach(([k, v]) => {
     resultCache.set(JSON.stringify(k), v)
    })
   } finally {
    lock = false
   }
  }
  const value = resultCache.get(key)!
  paramCache.set(key, paramCache.get(key)! - 1)
  if ((paramCache.get(key) || 0) <= 0) {
   paramCache.delete(key)
   resultCache.delete(key)
  }
  if (value instanceof Error) {
   resultCache.delete(key)
   throw value
  }
  return value as R
 }
}

实现批处理的基本思路如下

1.使用 Map paramCache 缓存传入的 参数 => 剩余调用次数(该参数还需要查询几次结果)
2.使用 Map resultCache 缓存 参数 => 结果
3.使用 lock 标识当前是否有函数正在执行
4.满足以下条件需要等待
       Map 中不包含结果
       目前有其它调用在执行
       还未满最小等待时长(收集调用的最小时间片段)
5.使用 lock 标识正在执行
6.判断是否已经存在结果
       如果不存在则执行批处理处理当前所有的参数
7.从缓存 Map 中获取结果
8.将 paramCache 中对应参数的 剩余调用次数 -1
9.判断是否还需要保留该缓存(该参数对应的剩余调用次数为 0)
       不需要则删除
10.判断缓存的结果是否是 Error
        是的话则 throw 抛出错误

LRU 缓存

参考: Wiki 缓存算法, 实现 MemoryCache

问:这里为什么使用缓存?
答:这里的字典接口在大概率上是幂等的,所以可以使用缓存提高性能
问:那么缓存策略为什么要选择 LRU 呢?
答:毫无疑问 FIFO 是不合理的
问:那为什么不选择 LFU 算法呢?它似乎能保留访问最频繁的资源
答:因为字典表并非完全幂等,吾辈希望避免一种可能?访问最多的字典一直没有删除,而它在数据库已经被更新了。

大致实现思路如下

1.使用一个 Map 记录 缓存 key => 最后访问时间
2.每次获取缓存时更新最后访问时间
3.添加新的缓存时检查缓存数量
          如果超过最大数量,则删除最后访问时间距离现在最长的一个缓存
4.添加新的缓存
Pass: 不要吐槽性能很差啦,这个场景下不会缓存特别多的元素啦,最多也就不到 1000 个吧

结合高阶函数

现在,我们可以结合这两种方式了,同时使用 onceOfSameParam/batch 两个高阶函数来优化 根据 id 获取字典信息 的 API 了。

const getById = onceOfSameParam(
 batch<[number], Dict>(async (idList) => {
  if (idList.length === 0) {
   return new Map()
  }
  // 一次批量处理多个 id
  const list = await this.getByIdList(uniqueBy(idList.flat()))
  return arrayToMap(
   list,
   (dict) => [dict.id],
   (dict) => dict,
  )
 }, 100),
)

支持异步 formatter

原本想要支持 ListTable 的异步 formatter 函数,但后来想想,如果 slot 里也包含字典 id 呢?那是否 slot 也要支持异步呢?这可是个比较棘手的问题,所以还是不支持好了。

最终,吾辈在组件与 API 之间添加了 *Service 中间层负责处理数据转换。

以上就是详解JavaScript 中的批处理和缓存的详细内容,更多关于JavaScript 中的批处理和缓存的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
JavaScript数组常用方法
Mar 02 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
Javascript中window.name属性详解
Nov 19 #Javascript
JavaScript实现图片合成下载的示例
Nov 19 #Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 #Vue.js
vue 插槽简介及使用示例
Nov 19 #Vue.js
微信小程序实现点击导航条切换页面
Nov 19 #Javascript
详解Vue的mixin策略
Nov 19 #Vue.js
微信小程序自定义底部弹出框功能
Nov 18 #Javascript
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
python条件和循环的使用方法
2013/11/01 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
安全先进班组材料
2014/12/26 职场文书
农业项目合作意向书
2015/05/08 职场文书
党支部季度考核意见
2015/06/02 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python