¿Por qué $ .getJSON() bloquea el navegador?

Question

Tengo una página donde enumero los dispositivos de hardware que supervisamos para los clientes. Cada fila mostrada también muestra el estado del dispositivo, ya sea en ejecución, en pausa, arrancando, etc.

Para mejorar los tiempos de carga de la página, lista los dispositivos pero no consulto su estado hasta que se muestra la página. Esto se debe a que algunas consultas, como SNMP u otras API, pueden tardar entre 5 y 10 segundos en responder. Entonces, para una lista de, digamos, diez dispositivos, podría llevar más de un minuto que el usuario mire una página en blanco. Así que la siguiente vez -

En la página de lista de dispositivos que tengo el siguiente 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); 
     //... 
    }); 
    }); 
}); 

Lo que estoy hallazgo es que si permito que esta secuencia de comandos para ejecutar, todos los enlaces de la página se convierten insensible.

Supongo que esto se debe a que tengo bastantes solicitudes asincrónicas casi paralelas que bloquean hasta que reciben una respuesta del servidor y de alguna manera el "hilo de UI" está siendo bloqueado por esto?

Sin embargo, pensé que esto no debería suceder con AJAX.

Encuentro este comportamiento de "bloqueo" en IE8, Chrome 8.0 y Firefox 3.6. De hecho, Chrome muestra el cursor de flecha + spinning-toilet-bowl-of-death (estoy usando Windows 7) como si la página no estuviera completamente renderizada.

¿Cómo puedo solucionar esto?

Answer 1

Resulta que esto no es un problema con el lado del cliente:

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

Esto fue causado por una característica "por diseño" de ASP.NET donde se serializan varias solicitudes realizadas en la misma sesión.

Answer 2

Parece que getJSON usa asincrónico: falso como una opción para xhr. De alguna manera me sorprende que jquery use eso como un defecto, ya que eso es casi siempre una mala idea por las razones que estás describiendo.

No tengo tiempo para verlo más por el momento, pero ese es el primer camino que tomaría.

Answer 3

Nunca he tenido problemas con $ .getJSON(). Por lo que sé, es asíncrono. Lo que se probablemente happenning es un error de JavaScript, ya que estamos tratando de hacer:

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

supongo que hay un error aquí porque respuesta es un objeto o matriz de JavaScript y no una cadena. Lo que debe hacer es texto (response.desiredProperty) o texto (respuesta [índice]) según el tipo de objeto respuesta es.

Dado que los errores de JavaScript a veces hacen que nuestros navegadores se comporten inesperadamente, esto PODRÍA (solo podría) hacerme su problema.

Answer 4

Imagino que se encuentra con las limitaciones del navegador para manejar solicitudes múltiples.

¿Has probado usar Fiddler y mirando la línea de tiempo para ver qué está bloqueando?

Este SO pregunta probablemente Ayuda:

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