JavaScript如何一次性展示幾萬條資料

標籤：function   辦公室   面試官   字串   如何   

 

網上看到一道面試題：“如果後台傳給前端幾萬條資料，前端怎麼渲染到頁面上？”，如何回答？ 於是辦公室沸騰了， 同事們討論開了， 你一言我一語說出自己的方案。 有的說直接迴圈遍曆產生html插到頁面上；有的說應該用分頁來處理；還有的說這個面試官是個白癡， 哪有後台傳幾萬條資料給前端這種情況的；我仔細思考了一下，先不論後端到底會不會白癡到傳幾萬條資料給前端，假如真碰到這種情況，那麼如果前端擷取到資料以後， 直接將資料轉換成html字串，通過DOM操作插入到頁面，勢必導致頁面運行出現卡頓， 為此我還特意寫了一個 demo測試了一下， 代碼如下

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="border:none;margin:0px;padding:0px;" />

$.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);}

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="border:none;margin:0px;padding:0px;" />

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

既然一次渲染13萬條資料會造成頁面載入速度緩慢，那麼我們可以不要一次性渲染這麼多資料，而是分批次渲染， 比如一次10000條，分13次來完成， 這樣或許會對頁面的渲染速度有提升。 然而，如果這13次操作在同一個代碼執行流程中運行，那似乎不但無法解決糟糕的頁面卡頓問題，反而會將代碼複雜化。 類似的問題在其它語言最佳的解決方案是使用多線程，JavaScript雖然沒有多線程，但是setTimeout和setInterval兩個函數卻能起到和多線程差不多的效果。 因此，要解決這個問題， 其中的setTimeout便可以大顯身手。 setTimeout函數的功能可以看作是在指定時間之後啟動一個新的線程來完成任務。

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="border:none;margin:0px;padding:0px;" />

$.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;    }}

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="border:none;margin:0px;padding:0px;" />

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

1. 用ajax擷取到需要處理的資料， 共13萬條
2. 將數組分組，每組500條，一共260組
3. 迴圈這260組資料，分別處理每一組資料， 利用setTimeout函數開啟一個新的執行線程（非同步），防止主線程因渲染大量資料導致阻塞。

loadPart函數中有這段代碼

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

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

通過這種方式執行， 頁面瞬間就刷出來了，不用絲毫等待時間。 從同步改為非同步，雖然代碼的整體資源消耗增加了， 但是頁面卻能瞬間響應， 而且， 前端的運行環境是使用者的電腦，因此些許的效能損失帶來的使用者體驗提升相對來說還是值得的。

雖然樣本中提到的情況在現實環境中幾乎不可能出現， 但是在我們平時的工作中總會有一些似是而非的情境出現， 利用裡面的處理思路， 或許對我們解決問題會有一定的協助。

JavaScript如何一次性展示幾萬條資料