一次渲染10萬條數(shù)據(jù)會(huì)造成頁面加載速度緩慢，那么我們可以不要一次性渲染這么多數(shù)據(jù)，而是分批次渲染， 比如一次10000條，分10次來完成， 這樣或許會(huì)對(duì)頁面的渲染速度有提升。 然而，如果這13次操作在同一個(gè)代碼執(zhí)行流程中運(yùn)行，那似乎不但無法解決糟糕的頁面卡頓問題，反而會(huì)將代碼復(fù)雜化。 類似的問題在其它語言最佳的解決方案是使用多線程，JavaScript雖然沒有多線程，但是setTimeout和setInterval兩個(gè)函數(shù)卻能起到和多線程差不多的效果。 因此，要解決這個(gè)問題， 其中的setTimeout便可以大顯身手。 setTimeout函數(shù)的功能可以看作是在指定時(shí)間之后啟動(dòng)一個(gè)新的線程來完成任務(wù)。
ajax 請求。。。。
function loadAll(response) {
//將10萬條數(shù)據(jù)分組， 每組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);
}
}
//數(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;
}
}
優(yōu)化方案可以
createDocumentFragment
requestAnimationFrame
setTimeout(()=>{
const total = 10000 //插入一萬條數(shù)據(jù)
const once = 20 // 一次插入的數(shù)據(jù)
const loopCount = Math.ceil(total/once) //插入數(shù)據(jù)需要的次數(shù)
let renderCount = 0
const ul = document.querySelector('ul') //創(chuàng)建、添加li節(jié)點(diǎn) 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)
