Question

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

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

但是，当启动Ajax调用时，在Internet Explorer中，使用返回的一小部分IP地址填充列表框可能需要3秒钟。在Firefox中，列表框基本上是立即填充的。

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

有人能指出我为什么会这样做的正确方向吗？

示例代码

$.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);
          }
        });

Answer 1

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

      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'));
      },

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

我改变的另一件事是document.createElement(...)。如果您查看$('<option />')的内部，它会为您执行createElement。

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

Answer 2

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

在这一行

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

你可以尝试

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

或者这个（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(""));

您可能会发现此article on jQuery's append()有用

Answer 3

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

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

Answer 4

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

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

4 个答案: