最近在项目中遇到一个性能问题,根据一些select选择框和一些单选按钮的值综合起来对一个数组进行遍历筛选,并获取最终符合条件的数据,但由于这个数组的长度过长,达到6000+,甚至更长,所以导致筛选之后的页面渲染有些卡顿,这个通过chrome浏览器的performance分析所得。所以需要对这个筛选的过程进行优化,最终想到将数组按一定长度拆分,然后并发执行循环这些拆分之后的数组,最后将结果组合起来即可。
用到的技术是promise,将拆分后的数组循环放到promise中,然后通过promise.all获得最终的数据
以下为实现demo(最近正好学typeScript,所以是以ts的语法编写的)
//拆分数组 function splitArray(array:Array<any>,spiltLength:number):Array<any>{ let index:number = 0; let arrayAfterSplit:Array<any> = []; while (index<array.length){ arrayAfterSplit.push(array.slice(index,index+=spiltLength)) } return arrayAfterSplit } // 构造数据 function constructRequireData(array:Array<any>,property:string){ let TemporaryArray:Array<any> = []; return new Promise((resolve,reject)=>{ for (let index = 0; index < array.length; index++) { //这里可以写一些筛选条件 TemporaryArray.push({ value:array[index][property], label:array[index][property] }) } resolve(TemporaryArray) }) } // 获取最终数据 function getFinalData(array:Array<any>):Array<any>{ let resultArr:Array<any>=[]; let splitArrayData:Array<any> = splitArray(array,2); let promiseArray:Array<any> = []; for (let index = 0; index < splitArrayData.length; index++) { promiseArray.push(constructRequireData(splitArrayData[index],'serviceName')) } Promise.all(promiseArray).then((result:Array<any>)=>{ resultArr = result.flat(); }) return resultArr } let arr:Array<any> = [ { serviceName:'demo01', offeringId:'01' }, { serviceName:'demo02', offeringId:'02' }, { serviceName:'demo03', offeringId:'03' }, { serviceName:'demo04', offeringId:'04' }, { serviceName:'demo05', offeringId:'05' }, { serviceName:'demo06', offeringId:'06' }, { serviceName:'demo07', offeringId:'07' }, ] getFinalData(arr);复制代码
TIME!