快捷導(dǎo)航

JavaScript如何一次性展示幾萬(wàn)條數(shù)據(jù)

更新時(shí)間：2017年03月30日 09:08:04 作者：陳宏鴻

本文主要介紹了JavaScript一次性展示幾萬(wàn)條數(shù)據(jù)的實(shí)現(xiàn)方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

有一位同事跟大家說(shuō)他在網(wǎng)上看到一道面試題：“如果后臺(tái)傳給前端幾萬(wàn)條數(shù)據(jù)，前端怎么渲染到頁(yè)面上？”，如何回答？于是辦公室沸騰了，同事們討論開(kāi)了，你一言我一語(yǔ)說(shuō)出自己的方案。有的說(shuō)直接循環(huán)遍歷生成html頁(yè)面上；有的說(shuō)應(yīng)該用分頁(yè)來(lái)處理；通過(guò)DOM操作到頁(yè)面，勢(shì)必導(dǎo)致頁(yè)面運(yùn)行出現(xiàn)卡頓，為此我還特意寫(xiě)了一個(gè) demo測(cè)試了一下，代碼如下

$.get("data.json", function (response) {
 //response里大概有13萬(wàn)條數(shù)據(jù)
 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萬(wàn)條數(shù)據(jù)左右，通過(guò)ajax獲取數(shù)據(jù)后以最簡(jiǎn)單粗暴的方法展示數(shù)據(jù)，在chrome瀏覽器下，刷新頁(yè)面到數(shù)據(jù)顯示，我心中默數(shù)，整個(gè)過(guò)程大概花掉5秒鐘左右的時(shí)間，卡頓非常明顯。我大致觀察了一下代碼的運(yùn)行時(shí)間，發(fā)現(xiàn)循環(huán)生成字符串這過(guò)程其實(shí)并不算太耗時(shí)，性能瓶頸是在將html字符串到文檔中這個(gè)過(guò)程上，也就是 $("#content").html(html); 這句代碼的執(zhí)行，畢竟有13萬(wàn)個(gè)li元素要被挺入到文檔里面，頁(yè)面渲染速度緩慢也在情理之中。

既然一次渲染13萬(wàn)條數(shù)據(jù)會(huì)造成頁(yè)面加載速度緩慢，那么我們可以不要一次性渲染這么多數(shù)據(jù)，而是分批次渲染，比如一次10000條，分13次來(lái)完成，這樣或許會(huì)對(duì)頁(yè)面的渲染速度有提升。然而，如果這13次操作在同一個(gè)代碼執(zhí)行流程中運(yùn)行，那似乎不但無(wú)法解決糟糕的頁(yè)面卡頓問(wèn)題，反而會(huì)將代碼復(fù)雜化。類似的問(wèn)題在其它語(yǔ)言最佳的解決方案是使用多線程，JavaScript雖然沒(méi)有多線程，但是setTimeout和setInterval兩個(gè)函數(shù)卻能起到和多線程差不多的效果。因此，要解決這個(gè)問(wèn)題，其中的setTimeout便可以大顯身手。 setTimeout函數(shù)的功能可以看作是在指定時(shí)間之后啟動(dòng)一個(gè)新的線程來(lái)完成任務(wù)。

$.get("data.json", function (response) {
  //response里大概有13萬(wàn)條數(shù)據(jù)
  loadAll( response );
});

function loadAll(response) {
  //將13萬(wàn)條數(shù)據(jù)分組， 每組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);
  }
}

//數(shù)據(jù)分組函數(shù)（每組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;

//加載某一批數(shù)據(jù)的函數(shù)
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>";
  }
  //保證順序不錯(cuò)亂
  while (index - currIndex == 1) {
    $("#content").append(html);
    currIndex = index;
  }
}

以上代碼大致的執(zhí)行流程是

1. 用ajax獲取到需要處理的數(shù)據(jù)，共13萬(wàn)條

2. 將數(shù)組分組，每組500條，一共260組

3. 循環(huán)這260組數(shù)據(jù)，分別處理每一組數(shù)據(jù)，利用setTimeout函數(shù)開(kāi)啟一個(gè)新的執(zhí)行線程（異步），防止主線程因渲染大量數(shù)據(jù)導(dǎo)致阻塞。

loadPart函數(shù)中有這段代碼

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

通過(guò)這種方式執(zhí)行，頁(yè)面瞬間就刷出來(lái)了，不用絲毫等待時(shí)間。從同步改為異步，雖然代碼的整體資源消耗增加了，但是頁(yè)面卻能瞬間響應(yīng)，而且，前端的運(yùn)行環(huán)境是用戶的電腦，因此些許的性能損失帶來(lái)的用戶體驗(yàn)提升相對(duì)來(lái)說(shuō)還是值得的。

雖然示例中提到的情況在現(xiàn)實(shí)環(huán)境中幾乎不可能出現(xiàn)，但是在我們平時(shí)的工作中總會(huì)有一些似是而非的場(chǎng)景出現(xiàn)，利用里面的處理思路，或許對(duì)我們解決問(wèn)題會(huì)有一定的幫助。

ps：setTimeout并不算真正的多線程，但是為了方便表達(dá)，便借用了線程一詞

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！