异步调用接口返回大量数据，如何处理才能使页面渲染时不卡？

页面上要渲染的表格数据是由很多个接口返回的数据拼成的，并且数据量相当大，甚至几千几万条,一般人想着如下方式处理，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);
    }   
}

我们把关键代码抽出来，写成最后的函数，是为了方便，当你写切换页面或者切换每页显示的条数的时候，直接就可以调用这个函数。