Why is $ .getJSON () blocking the browser?

Question

I have a page on which I list the hardware devices that we control for clients. Each displayed line also shows the status of the device, i.e. whether it is working, paused, started, etc.

To improve page load time, I list the devices, but do not request their status until the page is displayed. This is due to the fact that some requests, for example, through SNMP or another API, can take up to 5-10 seconds. Thus, for a list of ten devices, this can take more than a minute when a user looks at a blank page. So I do the following:

On the device list page, I have the following 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); //... }); }); }); 

What I find is that if I allow this script to run, all links on the page become unresponsive.

I suppose this is due to the fact that I have quite a few concurrent asynchronous requests blocking until they get a response from the server, and is somehow blocked by this "UI thread"?

However, I thought this should not happen with AJAX.

I find this “blocking” behavior in IE8, Chrome 8.0, and Firefox 3.6. Chrome actually shows the arrow + spinning-toilet-death (I use Windows 7), as if the page was not fully displayed.

How can i fix this?

Answer 1

It turns out that this is not a problem with the client side:

Can multiple calls of the same ASP.NET MVC action block a browser?

Can multiple calls of the same ASP.NET MVC action block a browser? - Answer

This is called “by design” of the ASP.NET function, where multiple requests made in the same session are serialized.

Answer 2

I assume that you are using browser restrictions to handle multiple requests.

Have you tried using Fiddler and looked at the chart to see what is blocking?

This SO question will probably help:

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

Answer 3

It seems that getJSON uses asynchronous: false as the xhr parameter. It surprises me that jquery will use this as the default, as it is almost always a bad idea for the reasons you describe.

You do not have time to study it more at the moment, but this is the first path I would take.

Answer 4

I have never had a problem with $ .getJSON (). As far as I know, it is asynchronous. This is probably a javascript error as you are trying to do:

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

I assume there is an error here, because the answer is a javascript object or array, not a string. What you need to do is text (response.desiredProperty) or text (response [index]) depending on the type of response object.

Since javascript errors sometimes make our browsers behave unpredictably, this MAY (only may) be your problem for me.