Why does $.getJSON() block the browser?

Question

I have a page where I list hardware devices we monitor for customers. Each row displayed also shows the status of the device i.e. whether it's running, paused, starting up etc.

To improve page load times I list the devices but don't query for their status until the page is rendered. This is because some queries such as via SNMP or other API's can take as much as 5-10 seconds to respond. So for a list of say ten devices it could take well over a minute of the user looking at a blank page. So I do the following instead -

On the device list page I have the following script:

$(document).ready(function () {

  var devices = $('div[name="runStatus"]');
  devices.each(function () {

    // Get device ID (I embed this using the HTML5 data-* attributes/annotations)
    var deviceId = $(this).attr("data-deviceid");
    var url = "/devmanager/status/" + deviceId;

    $.getJSON(url, function (response) {
      // Not actually important to the question...set text status, colours etc
      $('div[data-deviceid="' + deviceId + '"]').text(response);
      //...
    });
  });
});

What I'm finding is that if I allow this script to run, all links on the page become unresponsive.

I'm guessing this is because I've quite a few almost parallel async requests blocking until they get a response from the server and somehow the "UI thread" is being blocked by this?

However I thought this wasn't supposed to happen with AJAX.

I find this 'blocking' behaviour to happen in IE8, Chrome 8.0 and Firefox 3.6. Chrome in fact shows the arrow cursor + spinning-toilet-bowl-of-death (I'm using Windows 7) as if the page isn't completely rendered.

How can I fix this?

Answer 1

I imagine you're running into browser limitations for handling multiple requests.

Have you tried using Fiddler and looking at the timeline to see what is blocking?

This SO question will probably help:

How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?

Answer 2

Turns out this isn't a problem with the client side:

Would multiple calls to the same ASP.NET MVC action cause the browser to block?

Would multiple calls to the same ASP.NET MVC action cause the browser to block? - Answer

This was being caused by a "by-design" feature of ASP.NET where multiple requests made in the same session are serialised.