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);

打印的结果如下：

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