为什么$ .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错误有时会使我们的浏览器出现意外行为,因此可能(仅限于)我的问题。