详解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 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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字符串的连接的简单实例
2013/12/30 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue+element实现批量删除功能的示例
2018/02/28 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
详解Python流程控制语句
2020/10/28 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
Sony C++笔试题
2013/03/10 面试题
初二政治教学反思
2014/01/12 职场文书
工作总结与自我评价
2014/09/18 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
投诉信回复范文
2015/07/03 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB