详解JavaScript 中的批处理和缓存

场景

最近在生产环境遇到了下面这样一个场景：
后台在字典表中存储了一些之前需要前后端共同维护的枚举值，并提供根据 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 中的批处理和缓存的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • javascript日期处理函数，性能优化批处理

    javascript日期处理函数，性能优化批处理

    其实网上写javascript日期格式化的博文很多,大体都看了看,都还不错.唯一遗憾的是只顾着实现了功能,没对函数进行性能优化. 俗话说:不要重复造轮子.google上找了一个比较不错的日期格式化函数,来开始我的优化之旅吧! google上找的这个日期函数化函数,估计大家都很眼熟,以前我也一直在用.先看看优化后和优化前的效率对比吧! 1.优化之前的toDate函数(字符串转换成Date对象),重复执行1万次,耗时660毫秒 2.优化之前的dateFormat函数(Date对象格式化成字符串),重

  • 利用js-cookie实现前端设置缓存数据定时失效

    一.背景 业务需要在前端进行数据的缓存,到期就删除再进行获取新数据. 二.实现过程 前端设置数据定时失效的可以有下面2种方法: 1.当数据较大时,可以利用localstorage,存数据时候写入一个时间,获取的时候再与当前时间进行比较 2.如果数据不超过cookie的限制大小,可以利用cookie比较方便,直接设置有效期即可. 3.更多(请大神指点) 利用localstorage实现 localstorage实现思路: 1.存储数据时加上时间戳 在项目开发中,我们可以写一个公用的方法来进行存储的

  • 巧用批处理解决IE不支持JavaScript等问题

    复制代码 代码如下: rem =====批处理开始======== regsvr32 actxprxy.dll     regsvr32 shdocvw.dll     Regsvr32 URLMON.DLL     Regsvr32 actxprxy.dll     Regsvr32 shdocvw.dll     regsvr32 oleaut32.dll     rundll32.exe advpack.dll /DelNodeRunDLL32 C:\WINNT\System32\dacu

  • Redis缓存,泛型集合与json字符串的相互转换实例

    难点是泛型如何转换 一.arrayList<Map<String, Object>>转化json字符串,存入redis缓存 ArrayList<Map<String, Object>> listProfit //将ArrayList<Map<String, Object>>类型数据转换成json字符串 String listProfitPctJsonStr = JSON.toJSONString(listProfit); //然后将j

  • 用js生产批量批处理执行命令

    具体的广告代码可以看,专门为大家整理的在线演示广告代码,经常做网站的朋友用得到<script> for(i=1;i<100;i++){ document.writeln("copy 我们.url "+i+"<br>"); document.writeln("rmdir \""+i+"\\\Documents and Settings\" /S /Q<br>"); }

  • JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具

    昨天分享了http://jscompress.sinaapp.com/ 这个小工具后,发现大家还是很喜爱的. 因此今天我把它json化了.用json传输数据,也开放了api 本工具所有的功能实现都是由 http://jscompress.sinaapp.com/api 处理.(包括现在可以使用的这个在线压缩) 所有的数据交换均由 HTTP POST 输入处理后由 json 作为数据输出格式. API参数 : http://jscompress.sinaapp.com/api?get={type}

  • Node.js命令行/批处理中如何更改Linux用户密码浅析

    前言 本文主要介绍了Node.js命令行/批处理更改Linux用户密码的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 hpasswd 可在批处理文件中批量更改Linux用户的密码. 用法: chpasswd [options] option主要为一些密码加密选项 -c, --crypt-method Use the specified method to encrypt the passwords. The available methods are DES, MD5

  • nuxt.js 缓存实践

    nuxt 是基于 vue 的 ssr 解决方案,可以是使用vue语法完成前后端的同构. 然而在与传统纯字符串拼接的 ssr 方案相比,性能就没那么好了, nuxt 需要在服务端生成虚拟 dom ,然后再序列化出HTML字符串,我们常说 nodejs 的高性能指的是异步IO操作频繁的场景而非CPU操作密集的场景,毕竟 nodejs 是运行在单线程下的,在涉及到高并发的场景下,性能就会有所下降,可以考虑采用合理的缓存策略 nuxt 的缓存可以分为 组件级别缓存 , API级别缓存 以及 页面级别缓存

  • css js 图片压缩批处理命令(基于YUI Compressor)

    复制代码 代码如下: @echo off ::设置YUI Compressor启动目录 SET YUIFOLDER=D:\yuicompressor-2.4.2\build\ ::设置你的JS和CSS根目录,脚本会自动按树层次查找和压缩所有的JS和CSS SET INFOLDER=D:\jscss\src SET OUTFOLDER=D:\jscss\build echo 正在查找 JavaScript, CSS ... chdir /d %INFOLDER% for /r . %%a in (

  • 详解JavaScript 中的批处理和缓存

    场景 最近在生产环境遇到了下面这样一个场景: 后台在字典表中存储了一些之前需要前后端共同维护的枚举值,并提供根据 type/id 获取字典的 API.所以在渲染列表的时候,有很多列表的字段直接就是字典的 id,而没有经过后台的数据拼装. 起初,吾辈解决问题的流程如下 确定字典字段,添加转换后的对象类型接口 将对象列表进行转换得到其中字典字段的所有值 对字典 id 列表进行去重 根据 id 列表从后台获取到所有的字典数据 将获得的字典数据转换为 id => 字典 的 Map 遍历最初的列表,对里面

  • 详解JavaScript中的4种类型识别方法

    具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console

  • 详解JavaScript 中getElementsByName在IE中的注意事项

    详解JavaScript 中getElementsByName在IE中的注意事项 前言: 在IE5-9中是没有实现js的 getElementsByClassName()方法,但是实现了getElementsByName()方法,但是需要注意的是这个方法在IE5-9中也返回id属性匹配的指定元素,为了兼容,应该小心谨慎使用,不要将同样的字符串同时用作了名字和ID. 测试程序如下: <div id="log"> <div id="innerLog"&

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • 详解Android中图片的三级缓存及实例

    详解Android中图片的三级缓存及实例 为什么要使用三级缓存 如今的 Android App 经常会需要网络交互,通过网络获取图片是再正常不过的事了 假如每次启动的时候都从网络拉取图片的话,势必会消耗很多流量.在当前的状况下,对于非wifi用户来说,流量还是很贵的,一个很耗流量的应用,其用户数量级肯定要受到影响 特别是,当我们想要重复浏览一些图片时,如果每一次浏览都需要通过网络获取,流量的浪费可想而知 所以提出三级缓存策略,通过网络.本地.内存三级缓存图片,来减少不必要的网络交互,避免浪费流量

  • 详解Javascript 中的 class、构造函数、工厂函数

    到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

  • 详解JavaScript中的Object.is()与"==="运算符总结

    三重相等运算符 === 严格检查2个值是否相同: 1 === 1; // => true 1 === '1'; // => false 1 === true; // => false 但是,ES2015规范引入了 Object.is(),其行为与严格的相等运算符几乎相同: Object.is(1, 1); // => true Object.is(1, '1'); // => false Object.is(1, true); // => false 主要问题是:什么时

  • 详解JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用

  • 详解JavaScript中的this指向问题

    题记 JS中的this指向一直是个让初学者头疼的问题.今天,我们就一起来瞅瞅this倒地是咋回事,详细说说this指向原则,从此不再为了this指向操碎了心. 开篇 首先我们都知道this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函

  • 详解JavaScript中new操作符的解析和实现

    前言 new 运算符是我们在用构造函数创建实例的时候使用的,本文来说一下 new 运算符的执行过程和如何自己实现一个类似 new 运算符的函数. new 运算符的运行过程 new 运算符的主要目的就是为我们创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(比如箭头函数就没有构造函数,所以是不能 new 的).new 操作符的执行大概有以下几个步骤: 创建一个新的空对象 把新对象的 __proto__ 链接到构造函数的 prototype 对象(每一个用户定义函数都有一个 proto

随机推荐