详解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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
JS 5种遍历对象的方式
Jun 16 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
php下实现农历日历的代码
2007/03/07 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
php实现通过ftp上传文件
2015/06/19 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
详解a++和++a的区别
2017/08/30 Javascript
React如何避免重渲染
2018/04/10 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python多线程操作实例
2014/11/21 Python
python下MySQLdb用法实例分析
2015/06/08 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python实现连续图文识别
2018/12/18 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
机关节能减排实施方案
2014/03/17 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
自我检讨书范文
2015/01/28 职场文书
2015年营业员工作总结
2015/04/23 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers