title: Why does $.getJSON() block the browser?
body: <p>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.</p>
  
  <p>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 -</p>
  
  <p>On the device list page I have the following script:</p>
  
  <pre><code>$(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);
        //...
      });
    });
  });
  </code></pre>
  
  <p>What I'm finding is that if I allow this script to run, all links on the page become unresponsive.</p>
  
  <p>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?</p>
  
  <p>However I thought this wasn't supposed to happen with AJAX.</p>
  
  <p>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.</p>
  
  <p>How can I fix this?</p>