CODEWITHSUNDEEP
javascriptangularjsrest
Jean
Jean

Reputation: 2625

Angular JS : rest API is called with a delay

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?

Upvotes: 2

Views: 1482

Answers (3)

Seti
Seti

Reputation: 2314

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.

Upvotes: 1

artur grzesiak
artur grzesiak

Reputation: 20348

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).

Upvotes: 4

Khanh TO
Khanh TO

Reputation: 48982

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,...

Upvotes: 1

Related Questions