Angular JS : rest API is called with a delay

Question

Am trying to call some REST APIs from my AngularJS code. When looking at the page load time (say through Developer Tools -> Network in a browser like Firefox), the icons in the page load quickly. Then there is about 100 to 200ms gap, only after which the REST API is even called. I worked a simple example in Plunkr here : http://plnkr.co/edit/aTk8D9RXdmqBXoCwpVuG?p=preview

return $http({
method: 'GET', 
url: 'http://rest-service.guides.spring.io/greeting'
});
}
return restAPIs;
})
.controller('AppCtrl', function($scope,restFactoryService){

    restFactoryService.getInstanceDetails().success(function (data){
        $scope.datas=data;  
    });
});

I have used ng-repeat in my original code. I initially thought that the slowness was due to that. But, as you can see above, even with a simple REST API call, the delay happens. Also, see the screenshot below showing the page loading. You can see that the page loads in 80ms. Then there is a gap until 240ms, only after which the REST API is called. What is happening between 80ms and 240ms time frame? Why can't the REST API be called at 80ms itself?

enter image description here

Can someone please help?

I'm not sure I understand your problem... You ask "why this ajax request take some time" ? — enguerranws
– enguerranws, Commented Sep 24, 2014 at 13:26
Did you put a debugger before the request to see the time its reached ? — DontVoteMeDown
– DontVoteMeDown, Commented Sep 24, 2014 at 13:28
@enguerranws my question is : after 80ms, we see in the browser that nothing takes place until 240ms. Why this pause? — Jean
– Jean, Commented Sep 24, 2014 at 15:07
@Jean nothing is happening on the network, but the JS engine may be busy on something else (synchronously parsing loaded scripts, waiting for a ready event, etc...) — Greg
– Greg, Commented Oct 8, 2014 at 22:39
I suggest you make at least two calls and ignore the call. There might be some delay due to initialization the required components. — Aidin
– Aidin, Commented Oct 9, 2014 at 22:54

artur grzesiak · Accepted Answer · 2014-10-04 14:23:32Z

4

+25

I updated you plunker and added a bunch of performance.now()s to get detail info. The first timestamp is placed in html as the first element of head.

Here is what I got [all results in ms] -- the exact numbers may be different from run to run:

Application ready after: 207.77.
Window loaded after: 281.24 
Http requested started after 13.47 after ready.
Http response came after 161.80 after the request.
$http call took less than 0.88.

Here is updated PLNKR.

It seems that it takes ~200ms to parse all html and javascript. Btw. angular starts bootstrapping your app on DOMContentLoaded (more about bootstrap).

edited Oct 4, 2014 at 14:23

answered Oct 4, 2014 at 14:04

artur grzesiak

20.9k5 gold badges49 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr_Mig Over a year ago

If one need to mitigate the gap anyway, I would suggest use some preloading techniques.

Khanh TO · Accepted Answer · 2014-10-04 13:04:54Z

1

Sure, the request is not sent at that exact 80ms because there is some code inside $http method like reading the config, building the data, creating http request object,....All of this does take time which causes delay until the request is actually on the wire.

What is happening between 80ms and 240ms time frame

That's the time taken by the code inside $http method.

To be exact, there is also time taken to bootstrap your angular app, create your restFactoryService, make restFactoryService.getInstanceDetails() function call,...

edited Oct 4, 2014 at 13:04

answered Oct 4, 2014 at 12:48

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

2 Comments

artur grzesiak Over a year ago

Actually the very call to $http takes ~1ms, bootstrapping the app is less then <25ms (giving a gross margin error for angular's compilation).

Khanh TO Over a year ago

@artur grzesiak: The point here is: the request is not sent immediately, there is time taken to initialize the app (some are mentioned in my answer) and make the call. I put ... because I don't want to go into much detail. I just want to raise awareness that the request is sent only after initialization, making function calls,..

Seti · Accepted Answer · 2014-10-09 08:24:26Z

1

If you check the plunker on chrome, you will see that there is no so long delay. On IE 11 there is small gap too (like in your firefox) but i see that the greetings webservice is waiting for angular.min.js.map file to be retrieved. That may indicate that this browser uses less maximum number of connections for webpage. After that if you rerun code - the gap is not found.

answered Oct 9, 2014 at 8:24

Seti

2,31618 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular JS : rest API is called with a delay

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related