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

ajax 請求。。。。

function loadAll(response) {
    //將10萬條數據分組， 每組500條，一共200組
    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;
    }
}

優化方案可以

createDocumentFragment 
requestAnimationFrame 
setTimeout(()=>{ 
  const total = 10000 //插入一萬條數據 
  const once = 20 // 一次插入的數據 
  const loopCount = Math.ceil(total/once) //插入數據需要的次數 
  let renderCount = 0 
  const ul = document.querySelector('ul') //創建、添加li節點 function add(){ const fragment = document.createDocumentFragment()
  for(let i=0;i<once;i++){ 
    const li = document.createElement('li')
    li.innerText = Math.floor(Math.random()*total) 
    fragment.appendChild(li) 
  }
  ul.appendChild(fragment) 
  renderCount++; 
  loop() 
} 

function loop(){ 
  if(renderCount < loopCount){
     window.requestAnimationFrame(add) 
} 
 loop() 
} 
loop() 
},0)