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