性能优化:用promise封装web worker场景
在react中我们会经常使用一些数组的方法处理数据,然后再setState回去,这个处理数据的时间几乎短到可以忽略不计,但是如果数据量很大呢,比如一个下拉框,有几千上万条数据,通过关键词搜索精确匹配或者模糊匹配过滤出对应的下拉选项,这个数据前端自己处理时候,如果直接使用数组的处理方法,可能会卡一下,毕竟数据量大,而且渲染dom渲染个几千个dom会很卡。
思路
-
防抖确实有一定效果,但是效果有限,如果我就搜关键字1,或者关键字2,还是能模糊匹配到几千个,还是很卡
-
如果dom很多的时候,可以用虚拟滚动解决,但是公司的组件库里的Select不支持虚拟滚动,所以放弃这个方案了,但是如果你用的是Ant design,那么恭喜你能直接使用虚拟滚动,升级到最新版即可
image.png -
处理完dom render的问题再来看数据处理,先不考虑算法吧,毕竟只有几千条而已,所以我们应该考虑的是,让这个计算,不阻塞UI,所以得把这个过滤操作的计算,做成异步的,理论上来说应该是后端做的,前端只管调接口就行,但是如果安排给前端做的话,异步的计算可以使用web worker来做
-
web worker需要引入另外的js文件,然后巴拉巴拉线程间通信一大堆,又是互相postMessage和onMessage通信,麻烦的一逼,首先解决引入另外的js问题,
web worker动态化
可以不用创建另外的js,直接把函数转换成一个地址,然后通过通信,传递参数,很麻烦,这里有一个现成的轮子,相当nice,叫worker-function
,可以看到他主页,代码就80多行,https://github.com/arqex/worker-function/blob/master/WorkerFunction.js,可以直接通过npm安装 -
装完这个包后可以很简单的使用web worker进行大数据的计算,这个实际上并没有缩短查询时间,但是可以做到交互体验上的优化,至于查询时间上的优化,目前暂时没有超过2秒的,还不需要算法解决,也许算法能优化到 1.5秒,甚至1秒,但是在用户体验上来说,差别不大的话,就先不花费精力在这上面了