Question

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

为了改善页面加载时间，我列出了设备，但在呈现页面之前不会查询它们的状态。这是因为某些查询（例如通过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），就像页面没有完全呈现一样。

我该如何解决这个问题？

Answer 1

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

您是否尝试过使用Fiddler并查看时间轴以查看阻塞内容？

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

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

Answer 2

原来这不是客户端的问题：

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

这是由ASP.NET的“按设计”功能引起的，其中在同一会话中发出的多个请求被序列化。

Answer 3

听起来getJSON使用了异步：false作为xhr的选项。尽管如此，jquery会将其用作默认值，这让我很高兴，因为对于你所描述的原因，这几乎总是一个坏主意。

目前没有时间更多地研究它，但这是我要采取的第一条道路。

Answer 4

我从未遇到过$ .getJSON（）的问题。据我所知，它是异步的。可能发生的是javascript错误，因为你正在尝试：

$('div[data-deviceid="' + deviceId + '"]').text(response);

我猜这里有一个错误，因为响应是一个javascript对象或数组，而不是一个字符串。您应该根据响应的对象类型 text（response.desiredProperty）或 text（response [index]）。< / p>

由于javascript错误有时会让我们的浏览器出现意外行为，因此可能（仅限于）可能会导致您的问题。

为什么$ .getJSON（）会阻止浏览器？

4 个答案: