页面上要渲染的表格数据是由很多个接口返回的数据拼成的,并且数据量相当大,甚至几千几万条,一般人想着如下方式处理,eg:
var datas = [];
service.getNames(a,b,...其它参数).then(
function(response){
for(var i = 0;i<response.length;i++){
service.getDatas(response[i].name,...其它参数).then(
function(res){
for(var j = 0;j<res.length;j++){
datas.push(res[j]);
}
}
)
}
}
)
等所有的 datas 都“push ”完了,接着再用 datas 去渲染页面……殊不知这里相当的卡,如果数据超过上万条,那么页面会白板好几分钟,甚至死机……
问题出在哪里?很多新手可能会认为是异步调用接口返回数据导致的。其实接口返回数据是很快的,问题恰恰出现在咱们前端的渲染方式上:这里的渲染是等所有数据都 push 进 datas 的数组里再执行下一步,这个 push 的过程是很耗时的……所以我们前端应该在它边 push 的时候,边分页展示一部分数据,这样就不会有卡的情况:
var datas = [];
var showDatas = []; //用来存放一部分提前展示的数据
service.getNames(a,b,...其它参数).then(
function(response){
for(var i = 0;i<response.length;i++){
service.getDatas(response[i].name,...其它参数).then(
function(res){
for(var j = 0;j<res.length;j++){
datas[datas.length] = res[j]; //因为 datas.push(res[j]) 这样的写法,也会影响执行效率,所以做了改写,并且建议这样改写;
}
showDatas(1,10); //假如刚开始一页加载10条数据
}
)
}
}
)
function showDatas(curPage,dispalyLength){
var start = ( curPage-1 )*displayLength;
var end = start + displayLength; //页面显示的条数
if(start < datas.length){
showDatas = datas.slice(start,end);
}
}
我们把关键代码抽出来,写成最后的函数,是为了方便,当你写切换页面或者切换每页显示的条数的时候,直接就可以调用这个函数。