javascript - jQuery Ajax 调用在 IE 中非常慢，但在 Firefox 中是即时的

Question

我正在执行 jQuery .ajax()返回 List<string> 的调用指定子网上的 IP 地址。我用 [WebMethod]在 .aspx 页面上返回值。 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);
          }
        });

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