html加载10万条数据,js使用ajax请求10w条以上数据的优化方案

原来的代码：

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没什么区别。改改就好了。