为什么$ .getJSON()会阻止浏览器?

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

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

我怎样才能解决这个问题?

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

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

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

流行的浏览器允许多少并发AJAX(XmlHttpRequest)请求?

事实certificate这不是客户端的问题:

多次调用同一个ASP.NET MVC操作会导致浏览器阻塞吗?

多次调用同一个ASP.NET MVC操作会导致浏览器阻塞吗? – 回答

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

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

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

我从来没有遇到过$ .getJSON()的问题。 据我所知,它是异步的。 可能发生的是一个javascript错误,因为你正在尝试:

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

我猜这里有一个错误,因为响应是一个javascript对象或数组,而不是一个字符串。 根据对象响应的类型,你应该做的是text(response.desiredProperty)text(response [index])

由于javascript错误有时会使我们的浏览器出现意外行为,因此可能(仅限于)我的问题。