CODEWITHSUNDEEP
javascriptgoogle-chrome
Andy-Delosdos
Andy-Delosdos

Reputation: 3720

Google Chrome: HTTP GET on localhost, inconsistent load times

In my Angular2 project I have a component that loads JSON data via HTTP, and displays it on the page as a grid. The grid has pagination and the component performs a new HTTP GET each time a new grid page is requested. The dev site is hosted on localhost, as is the webservice, but they use different port numbers.

The component works without any errors. However, I have noticed that in Google Chrome the HTTP GET response time seems to fluctuate up & down for no obvious reason. This only happens in Chrome. In Firefox there are no issues.

When I deploy the site to live there are no issues in Chrome OR Firefox so this problem is specific to Chrome + my dev environment/possibly the localhost URLs.

Here is a screenshot of my Google Chrome network tab on the development site: enter image description here

If you look at the Time column you can see the time fluctuates between approx 80ms and 380ms for each consecutive request. 380ms is almost 5x longer, so as you'd expect the grid component refresh is noticeably delayed every time there's a slower response. Again, this only happens in Chrome.

Digging deeper, here is a screenshot of the timings for a slow HTTP GET: enter image description here

You can see from the above example that the webservice responds in approx 75ms, but Chrome reports that the whole operation took 377ms?! Looking at the timings I have no idea where 377ms came from, because the other figures clearly do not add up to 377ms. However, looking at the visual timing bars, there's a massive gap between DNS Lookup and Initial Connection!

And, here's a screenshot for a faster HTTP GET: enter image description here

As you can see from the above timings, there is no DNS lookup or Initial Connection sections, like there is in the previous screenshot which is a bit odd?

Does anyone have any suggestions on how I might go about pin-pointing and resolving the issue here?

Any help would be greatly appreciated :)

Upvotes: 7

Views: 2085

Answers (1)

Andy-Delosdos
Andy-Delosdos

Reputation: 3720

Quick update: I managed to fix the issue in the end by using a different host name for my dev site.

I added 127.0.0.1 testsite into my hosts file, then changed my dev server URL to http://testsite:3000. I was previously using http://localhost:3000. After that the HTTP GETs all dropped to a consistent 80ms-ish and there were no more DNS Lookup issues in the Network tab of the Developer Tools.

Not exactly sure of the source, but using localhost as the host was causing an issue somewhere.

Upvotes: 3

Related Questions