JavaScript一次展示幾萬個資料實例程式碼

本文主要介紹了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時互相篡位。

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

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

ps：setTimeout並不算真正的多線程， 但是為了方便表達，便藉用了線程一詞

以上是JavaScript一次展示幾萬個資料實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！