为什么 $.getJSON() 会阻止浏览器？

我有一个页面，其中列出了我们为客户监控的硬件设备。显示的每一行还显示设备的状态，即是否正在运行、暂停、启动等。

为了缩短页面加载时间，我列出了设备，但在呈现页面之前不查询其状态。这是因为某些查询（例如通过 SNMP 或其他 API 进行的查询）可能需要长达 5-10 秒的时间才能响应。因此，对于包含十个设备的列表，用户查看空白页面可能需要一分钟多的时间。所以我改为执行以下操作 -

在设备列表页面上我有以下脚本：

$(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);
      //...
    });
  });
});

我发现，如果我允许此脚本运行，页面上的所有链接都会变得无响应。

我猜这是因为我有相当多的几乎并行的异步请求被阻塞，直到它们得到服务器的响应，并且不知何故“UI 线程”被阻塞了？

然而我认为 AJAX 不应该发生这种情况。

我发现这种“阻止”行为发生在 IE8、Chrome 8.0 和 Firefox 3.6 中。事实上，Chrome 会显示箭头光标 + 旋转厕所碗死亡（我使用的是 Windows 7），就好像页面未完全呈现一样。

我怎样才能解决这个问题？

我想您在处理多个请求时遇到了浏览器的限制。

您是否尝试过使用 Fiddler 并查看时间线来查看阻塞的原因？

这个问题可能会有所帮助：

流行浏览器中允许多少个并发 AJAX (XmlHttpRequest) 请求？ https://stackoverflow.com/questions/561046/how-many-concurrent-ajax-xmlhttprequest-requests-are-allowed-in-popular-browser