JavaScript如何一次性展現幾萬條數據

 

網上看到一道面試題：「若是後臺傳給前端幾萬條數據，前端怎麼渲染到頁面上？」，如何回答？ 因而辦公室沸騰了， 同事們討論開了， 你一言我一語說出本身的方案。 有的說直接循環遍歷生成html插到頁面上；有的說應該用分頁來處理；還有的說這個面試官是個白癡， 哪有後臺傳幾萬條數據給前端這種狀況的；我仔細思考了一下，先不論後端到底會不會白癡到傳幾萬條數據給前端，假如真碰到這種狀況，那麼若是前端獲取到數據之後， 直接將數據轉換成html字符串，經過DOM操做插入到頁面，勢必致使頁面運行出現卡頓， 爲此我還特地寫了一個 demo測試了一下， 代碼以下

$.get("data.json", function (response) {    //response裏大概有13萬條數據    loadAll( response );
});function loadAll(response) {    var html = "";    for (var i = 0; i < response.length; i++) {        var item = response[i];
        html += "<li>title:" + item.title + " content:" + item.content + "</li>";
    }
    $("#content").html(html);
}

data.json中大概有13萬條數據左右， 經過ajax獲取數據後以最簡單粗暴的方法展現數據，在chrome瀏覽器下， 刷新頁面到數據顯示，我心中默數， 整個過程大概花掉5秒鐘左右的時間， 卡頓很是明顯。 我大體觀察了一下代碼的運行時間，發現循環生成字符串這過程其實並不算太耗時， 性能瓶頸是在將html字符串插入到文檔中這個過程上， 也就是 $("#content").html(html); 這句代碼的執行， 畢竟有13萬個li元素要被挺入到文檔裏面， 頁面渲染速度緩慢也在情理之中。

既然一次渲染13萬條數據會形成頁面加載速度緩慢，那麼咱們能夠不要一次性渲染這麼多數據，而是分批次渲染， 好比一次10000條，分13次來完成， 這樣或許會對頁面的渲染速度有提高。 然而，若是這13次操做在同一個代碼執行流程中運行，那彷佛不但沒法解決糟糕的頁面卡頓問題，反而會將代碼複雜化。 相似的問題在其它語言最佳的解決方案是使用多線程，JavaScript雖然沒有多線程，可是setTimeout和setInterval兩個函數卻能起到和多線程差很少的效果。 所以，要解決這個問題， 其中的setTimeout即可以大顯身手。 setTimeout函數的功能能夠看做是在指定時間以後啓動一個新的線程來完成任務。

$.get("data.json", function (response) {    //response裏大概有13萬條數據    loadAll( response );
});function loadAll(response) {    //將13萬條數據分組， 每組500條，一共260組
    var groups = group(response);    for (var i = 0; i < groups.length; i++) {        //閉包， 保持i值的正確性
        window.setTimeout(function () {            var group = groups[i];            var index = i + 1;            return function () {                //分批渲染                loadPart( group, index );
            }
        }(), 1);
    }
}//數據分組函數（每組500條）function group(data) {    var result = [];    var groupItem;    for (var i = 0; i < data.length; i++) {        if (i % 500 == 0) {
            groupItem != null && result.push(groupItem);
            groupItem = [];
        }
        groupItem.push(data[i]);
    }
    result.push(groupItem);    return result;
}var currIndex = 0;//加載某一批數據的函數function loadPart( group, index ) {    var html = "";    for (var i = 0; i < group.length; i++) {        var item = group[i];
        html += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
    }    //保證順序不錯亂
    while (index - currIndex == 1) {
        $("#content").append(html);
        currIndex = index;
    }
}

以上代碼大體的執行流程是

1. 用ajax獲取到須要處理的數據， 共13萬條
2. 將數組分組，每組500條，一共260組
3. 循環這260組數據，分別處理每一組數據， 利用setTimeout函數開啓一個新的執行線程（異步），防止主線程因渲染大量數據致使阻塞。

loadPart函數中有這段代碼

while (index - currIndex == 1) {
    $("#content").append(html);
    currIndex = index;
}

是爲了保證不一樣的線程中最終插入html到文檔中時順序的一致性， 不至於同時執行的代碼在插入html時互相篡位。

經過這種方式執行， 頁面瞬間就刷出來了，不用絲毫等待時間。 從同步改成異步，雖然代碼的總體資源消耗增長了， 可是頁面卻能瞬間響應， 並且， 前端的運行環境是用戶的電腦，所以些許的性能損失帶來的用戶體驗提高相對來講仍是值得的。

雖然示例中提到的狀況在現實環境中幾乎不可能出現， 可是在咱們平時的工做中總會有一些似是而非的場景出現， 利用裏面的處理思路， 或許對咱們解決問題會有必定的幫助。