Почему $.getJSON() блокирует браузер?

У меня есть страница, на которой я перечисляю аппаратные устройства, которые мы контролируем для клиентов. Каждая отображаемая строка также показывает состояние устройства, то есть, работает ли оно, приостанавливается, запускается и т.д.

Чтобы улучшить время загрузки страницы, я перечисляю устройства, но не запрашиваю их статус до отображения страницы. Это связано с тем, что некоторые запросы, например, через SNMP или другой API, могут занять до 5-10 секунд. Таким образом, для списка десяти устройств это может занять более минуты, когда пользователь смотрит на пустую страницу. Поэтому я делаю следующее:

На странице списка устройств у меня есть следующий 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);
      //...
    });
  });
});

Что я нахожу, так это то, что если я разрешаю запустить этот script, все ссылки на странице становятся невосприимчивыми.

Я предполагаю, что это связано с тем, что у меня довольно много параллельных асинхронных запросов, блокирующих до тех пор, пока они не получат ответ от сервера, и каким-то образом блокируется этим "поток пользовательского интерфейса"?

Однако я думал, что это не должно произойти с AJAX.

Я нахожу это "блокирующее" поведение в IE8, Chrome 8.0 и Firefox 3.6. Chrome фактически показывает стрелку + спиннинг-унитаз-смерт (я использую Windows 7), как если бы страница не была полностью отображена.

Как я могу это исправить?

Ответ 1

Оказывается, это не проблема с клиентской стороной:

Может ли несколько вызовов одного и того же действия ASP.NET MVC блокировать браузер?

Может ли несколько вызовов одного и того же действия ASP.NET MVC блокировать браузер? - Ответ

Это вызвано "по-дизайне" функции ASP.NET, где несколько запросов, сделанных в одном сеансе, сериализованы.

Ответ 2

Я предполагаю, что вы используете ограничения браузера для обработки нескольких запросов.

Вы пытались использовать Fiddler и смотрели на график, чтобы увидеть, что блокирует?

Этот вопрос SO, вероятно, поможет:

Сколько одновременных запросов AJAX (XmlHttpRequest) разрешено в популярных браузерах?

Ответ 3

Похоже, что getJSON использует асинхронный: false как параметр xhr. Меня это удивляет тем, что jquery будет использовать это как значение по умолчанию, поскольку это почти всегда плохая идея по причинам, которые вы описываете.

У вас нет времени, чтобы изучить его больше на данный момент, но это первый путь, который я бы взял.

Ответ 4

У меня никогда не было проблем с $.getJSON(). Насколько я знаю, он асинхронен. Вероятно, это ошибка javascript, поскольку вы пытаетесь сделать:

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

Я предполагаю, что здесь есть ошибка, потому что ответ - это объект или массив javascript, а не строка. Что вам нужно сделать, это текст (response.desiredProperty) или текст (ответ [index]) в зависимости от типа объекта ответ.

Так как ошибки javascript иногда заставляют наши браузеры вести себя непредсказуемо, это МОЖЕТ (только может) мне ваша проблема.