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

针对

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

原始方法

遍历方法一般如下:

for(let i=0;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);

打印的结果如下:



可以看出遍历是异步执行,执行间隔为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

你可能感兴趣的:(js针对大量数据的数据分块技术)