在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，直接把函数转换成一个地址，然后通过通信，传递参数，这里有一个现成的轮子叫worker-function，可以看到他主页，代码就80多行，https://github.com/arqex/worker-function/blob/master/WorkerFunction.js，可以直接通过npm安装装完这个包后可以很简单的使用web worker进行大数据的计算，这个实际上并没有缩短查询时间，但是可以做到交互体验上的优化，至于查询时间上的优化，目前暂时没有超过2秒的，还不需要算法解决，也许算法能优化到 1.5秒，甚至1秒，但是在用户体验上来说，差别不大的话，就先不花费精力在这上面了
