jQuery Ajax在IE中调用非常慢，但在Firefox中即时调用

I am performing a jQuery .ajax() call that returns a List<string> of IP addresses on a specified subnet. I use a [WebMethod] on an .aspx page to return the values. ASP.NET's built-in JSON serializer does the magic to return the actual JSON used in my Javascript.

我正在执行一个jQuery .ajax（）调用，它返回指定子网上的IP地址列表。我在.aspx页面上使用[WebMethod]来返回值。 ASP.NET的内置JSON序列化程序可以回报我的Javascript中使用的实际JSON。

I have profiled the the server-side time, and it takes about 8 msec to populate and return the list, so the server-side code is not the issue.

我已经分析了服务器端的时间，并且填充并返回列表大约需要8毫秒，因此服务器端代码不是问题。

However, when the Ajax call is initiated, in Internet Explorer it can take upwards of 3 seconds to populate a listbox with a small list of IP addresses returned. In Firefox, the listbox is essentially populated instantly.

但是，启动Ajax调用时，在Internet Explorer中，最多可能需要3秒才能填充返回的少量IP地址列表框。在Firefox中，列表框基本上是立即填充的。

I'm not entirely certain where the bottleneck could be. My best guess is that the fault lies with IE6's javascript engine, but even so, adding only 255 list items should not take this much time.

我不完全确定瓶颈在哪里。我最好的猜测是错误在于IE6的javascript引擎，但即便如此，只添加255个列表项不应该花费这么多时间。

Can anyone point me in the right direction as to why this is happening?

任何人都可以指出我正确的方向为什么会发生这种情况？

Example Code

示例代码

$.ajax({
          type: "POST",
          url: $("Example.aspx/GetIPsOnNetwork",
          data: "{NetworkID: " + networkID + "}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(data) {
            $('#ipAddresses').empty();
            // Loop through each IP address and add it to the listbox
            $.each(data.d, function(){
                var ip = this.toString();
                $(document.createElement('option')).attr('value', ip).text(ip).appendTo('#ipAddresses');
            });
          },
          error: function(msg) {
            alert('Error: ' + msg);
          }
        });

4 个解决方案

#1

It could be a rendering issue. try this

这可能是一个渲染问题。尝试这个

      success: function(data) {
        // Loop through each IP address and add it to the listbox
        var list = $("<select />");
        $.each(data.d, function(){
            var ip = this.toString();
            list.append($('<option />').val(ip).text(ip));
        });
        $('#ipAddress').empty().append(list.find('option'));
      },

Basically, what you're doing is loading the options into a dummy list, then you're adding the contents to the ipAddresses list.

基本上，您正在做的是将选项加载到虚拟列表中，然后将内容添加到ipAddresses列表中。

The other thing that I changed was the document.createElement(...). If you look at the internals of $('<option />') it performs the createElement for you.

我改变的另一件事是document.createElement（...）。如果你查看$（''）的内部，它会为你执行createElement。

Finally I choose to append the data to the list instead of calling option.appendTo('#ipAddress'), which would have to find the ipAddress element every time.

最后，我选择将数据附加到列表而不是调用option.appendTo（'＃ipAddress'），每次都必须找到ipAddress元素。

#2

I suspect it might be a difference in speed of creating the option elements in IE and adding each one by one to the DOM.

我怀疑在IE中创建选项元素并逐个添加到DOM中的速度可能会有所不同。

On this line

在这条线上

$(document.createElement('option')).attr('value', ip).text(ip).appendTo('#ipAddresses');

You could try

你可以试试

var optionArray = [];
for (var i= 0; i < this.length; i++)
{
      optionArray[i] = $('<option>').val(ip).text(ip);
}
$('#ipAddresses').empty().append(optionArray.join(""));

or this (data.d is an object, right?)

或者这个（data.d是一个对象，对吧？）

var optionArray = [];
var i = 0;
$.each(data.d, function(key, value)
{
      optionArray[i++] = $('<option>').val(value).text(value);
});
$('#ipAddresses').empty().append(optionArray.join(""));

You might find this article on jQuery's append() useful

你可能会发现这篇关于jQuery的append（）的文章很有用

#3

Creating elements using the recommended DOM creation methods is extremely slow compared to the non-standard yet ubiquitous .innerHTML property. I once had to update a table with about 100 rows and just like you experienced, the older the browser the slower the operation using element creation. If you can, create a dummy SELECT element and populate it with a manually a concatenated HTML string of your OPTION elements and then use .innerHTML on your dummy SELECT object. You are then free to do whatever you want with this element (using .replaceChild, etc).

与非标准但无处不在的.innerHTML属性相比，使用推荐的DOM创建方法创建元素的速度非常慢。我曾经不得不用大约100行更新一个表，就像你经历过的那样，浏览器越老，使用元素创建的操作越慢。如果可以，创建一个虚拟SELECT元素，并用手动的OPTION元素的连接HTML字符串填充它，然后在虚拟SELECT对象上使用.innerHTML。然后，您可以随意使用此元素执行任何操作（使用.replaceChild等）。

While this is a non-standard way of doing element creation, .innerHTML is going to stay with us for a long, long time, and it is fast.

虽然这是一种非标准的元素创建方式，但是.innerHTML会在很长一段时间内与我们保持一致，而且速度很快。

#4

I've found jquery's append to be very slow compared to innerHTML in IE7. Firefox and Chrome seem to render at the same speed using either append or innerHTML. This may have something to do with what Salaryman was saying about DOM creation methods.

我发现与IE7中的innerHTML相比，jquery的速度非常慢。 Firefox和Chrome似乎使用append或innerHTML以相同的速度渲染。这可能与Salaryman关于DOM创建方法的内容有关。

#1