javascript - 关于页面同时异步请求两个js,渲染页面等待如何优化
迷茫
迷茫 2017-04-11 12:07:51
0
8
508

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

reply all(8)
左手右手慢动作

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

大家讲道理

使用nodev7性能会好一点吧

PHPzhong

举一个最简单的例子:

var waiting = 2;

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

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

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

黄舟

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

大家讲道理

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

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

刘奇

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

PHPzhong

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

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

迷茫

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

var counter = 0;

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

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!