4

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

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

但是，当启动 Ajax 调用时，在 Internet Explorer 中，可能需要 3 秒以上的时间来填充返回的一小部分 IP 地址列表框。在 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);
          }
        });
4

4 回答 4

4

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

      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 元素。

于 2009-04-03T22:19:13.820 回答
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(""));

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

于 2009-04-03T22:29:41.453 回答
2

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

虽然这是一种非标准的元素创建方式，但 .innerHTML 将伴随我们很长时间，而且速度很快。

于 2009-04-03T23:15:25.463 回答
1

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

于 2009-07-07T19:47:56.830 回答