javascript - 关于页面同时异步请求两个js，渲染页面等待如何优化

Question

在一个页面中，需要去请求两个列表回来，进入页面时，利用异步，分别去请求2个接口，拿回数据，并渲染成列表，
但是实际加载中，出现了个问题，就是2个js，哪个写在后面，它的等待时间就会变成，第一个大概是50多毫秒，而第二个完成则需要1秒了，应该是第二个需要等待第一个渲染完后，再进行渲染的原因，请问有什么办法可以优化的吗？

Answer 1

用promise，有个promise.all()的方法，可以将两个方法获得的数据以一个数组的形式返回。

Answer 2

使用nodev7性能会好一点吧

Answer 3

举一个最简单的例子:

var waiting = 2;

setTimeout(function() {
    waiting--;
    if(!waiting) {
        doSth();
    }
}, 500);

setTimeout(function() {
    waiting--;
    if(!waiting) {
        doSth();
    }
}, 500);

其实这种情况, 使用 Promise 及其兼容方案是最好的.

Answer 4

异步加载的话，2个应该是互不影响的才对，怎么会第二个要等第一个完成。

Answer 5

需要后台去解决这个问题，可能的点有
1、后台webserver是什么，有没有解决并发下载的问题
2、网络带宽是怎样的

后台webserver是关键，推荐使用nginx、apache来做webserver，并配置适当的进程数量

Answer 6

你都用jq了, 为什么不用when ?

Answer 7

上面说的没有说到点子上，根据你的贴图来看，你慢的请求卡在Waiting（TTFB）那里，什么是Waiting看这个回答
https://segmentfault.com/q/10...

也就是其实是卡在服务端那里，找服务端的人去查下，为何这个请求这么慢才返回？这才是真正原因。

Answer 8

也可以建立个全局变量，数组或者整型。比如加载操作一共需要2步。

var counter = 0;

function Finished() 
{
    if(counter==2)
    {
        最终的显示操作等等
    }
}

在每个异步操作的完成事件里 counter+=1; 然后调用Finished()。