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