jQuery Ajax 调用在 IE 中非常慢，但在 Firefox 中却很快

Question

我正在执行 jQuery .ajax() 调用，该调用返回指定子网上 IP 地址的 List。 我在 .aspx 页面上使用 [WebMethod] 来返回值。 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(...)。 如果您查看 $('') 的内部结构，它会为您执行 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(""));

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

Answer 3

与非标准但普遍存在的 .innerHTML 属性相比，使用推荐的 DOM 创建方法创建元素极其缓慢。 我曾经不得不更新一个大约 100 行的表，就像您所经历的那样，浏览器越旧，使用元素创建的操作就越慢。 如果可以的话，创建一个虚拟 SELECT 元素并使用 OPTION 元素的手动连接 HTML 字符串填充它，然后在虚拟 SELECT 对象上使用 .innerHTML。 然后，您可以自由地对该元素执行任何您想要的操作（使用 .replaceChild 等）。

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

Answer 4

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