js针对大量数据的数据分块技术

针对

当js对数据量庞大的数组执行遍历时,会相当耗费时间和内存,因为js是单线程,因此在这个循环执行完之前会一直阻塞后面的代码执行,从而影响页面的渲染,逻辑绑定等等。这里讲下如何处理大数据的遍历的方法。

原始方法

遍历方法一般如下:

for(let i=0;i<data.length;i++) {
    processData(data[i]);
}

但是当面对庞大的数组时,上面代码执行的时间可能会相当长,下面来优化这个数组。

前提

优化的前提是,需要满足下面两个条件

  • 数据处理可以不同步运行

  • 数据处理可以不按顺序进行

具体方法

可以利用定时器去优化遍历数组,让遍历异步进行,这样就不会阻塞下面代码的执行,而且也可以正常遍历。具体代码如下:

function chunk (data) {
    setTimeout(function() {
        processData(data.shift());
        if (data.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}

上面方法主要是利用data.shift获取数组中第一个元素的值,对这个值执行数据处理方法,并检查该数组是否有下一项,有的话利用callee继续执行该函数。这里的延时时间是100ms,可以根据具体的业务场景调整。这项技术叫做数据分块

方法优化

由于某些处理程序需要带入上下文,因此可以将方法继续优化,如下:

function chunk (data, context) {
    setTimeout(function() {
        processData.call(context, data.shift());
        if (data.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}

context 可以传也可以不传,举一个具体例子:

let arr = [1,2,3,4,5,6,7,8,9,10],
    nowTime = +new Date();

function processData (data) {
    console.log(data, +new Date() - nowTime);
}

function chunk (data, context) {
    setTimeout(function() {
        processData.call(context, data.shift());
        if (data.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}

chunk(arr);

打印的结果如下:
print
可以看出遍历是异步执行,执行间隔为100ms。

注意:在这里是顺序执行的,但是如果间隔为0ms,并且数据处理程序需要执行很长时间时,就有可能导致遍历的方法不按顺序执行另外,shift方法是直接对原数组进行操作,所以如果不想要修改原数组时,可以传入原数组的拷贝。

let arr = [1,2,3,4,5,6,7,8,9,10],
    nowTime = +new Date();

function processData (data) {
    console.log(data, +new Date() - nowTime);
}

function chunk (data, context) {
    setTimeout(function() {
        processData.call(context, data.shift());
        if (data.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}

chunk(arr.concat());

这里利用了concat方法,生成了一个新数组,亦可以用extend等等,达到效果即可。

原文链接

the end.


3Fuyu

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值