2010-12-05 19 views
10

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?

+3

¿Cuántos elementos hay en la colección de dispositivos? Es probable que solo puedas hacer 2 o 3 solicitudes simultáneas de Ajax a la vez, el resto se pondrá en cola, posiblemente ralentizando la carga del resto de la página (descarga de imágenes y tal). – Douglas

+0

$ ('div [data-deviceid = "' + deviceId + '"]'). Texto (respuesta); parece un selector bastante caro. Al menos en una página más grande. Si elimina todo el código en la devolución de llamada, y la página se ejecuta rápidamente, esa es la razón. ¡Vale la pena intentarlo! –

+0

@douglas, @mikael - hay 6 artículos en la lista. Establecer estos valores (en un ciclo for) ocurre en un abrir y cerrar de ojos. – Kev

Respuesta

0

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.

+0

Según los documentos $ .getJSON() es una llamada abreviada $ .ajax() y establece async: true. – Kev

0

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.

+0

No es un error de javascript. También la respuesta es una cadena ... confía en mí. Comprobé todo esto en las herramientas de desarrollo Firebug/Chrome. El problema definitivamente tiene que ver con las llamadas asincrónicas. Y tienes razón, $ .getJSON es un método abreviado asincrónico para llamar a $ .ajax(). – Kev

+0

Además ... cuando comento la línea con '$ ('div [data-deviceid ="' + deviceId + '"]'). Text (response);' el problema persiste. – Kev

+0

Interesante ... Solo pensé que este podría ser el problema, pero resulta que estoy completamente equivocado. Este problema nos lleva a la respuesta de ScottE, que es muy interesante y podría ocurrir en muchas situaciones diferentes. Volveré a verificar esto para ver qué hizo para resolver este problema. –

Cuestiones relacionadas