有一位同事跟大家說他在網上看到一道面試題：“如果后臺傳給前端幾萬條數據，前端怎么渲染到頁面上？”，如何回答？ 于是辦公室沸騰了， 同事們討論開了， 你一言我一語說出自己的方案。 有的說直接循環遍歷生成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;  }}