原来的代码:
loadAll(data);
function loadAll(response) {
var html = "";
for(var i = 0; i < response.length; i++) {
var item = response[i];
html += "
姓名:" + item.name + "手机号:" + item.phone + "电子邮箱:" + item.email + "";}
$("#content").html(html);
}
优化后的代码:
loadAll(data);
function loadAll(response) {
// 将 18 万条数据分组, 每组 500 条,一共 360 组
let groups = group(response);
for(let i = 0; i < groups.length; i++) {
//闭包, 保持i值的正确性
window.setTimeout(function() {
let group = groups[i];
let index = i + 1;
return function() {
//分批渲染
loadPart(group, index);
}
}(), 1);
}
}
// 数据分组函数(每组 500 条)
function group(data) {
let result = [];
let groupItem;
for(let 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;
}
let currIndex = 0;
// 加载某一批数据的函数
function loadPart(group, index) {
let html = "";
for(let i = 0; i < group.length; i++) {
let item = group[i];
html += "
姓名:" + item.name + "手机号:" + item.phone + "电子邮箱:" + item.email + "";}
// 保证顺序不错乱
while(index - currIndex == 1) {
$("#content").append(html);
currIndex = index;
}
}
此方案以应用在实际项目中(一个页面有45w条数据,目前不卡)。项目使用vue。原生js,jquery,vue没什么区别。改改就好了。