jQuery的Ajax调用在IE在Firefox很慢，但瞬间 [英] jQuery Ajax call very slow in IE, but instant in Firefox

问题描述

我表演一个jQuery 阿贾克斯（）调用返回名单，其中，串＆GT; IP地址上一个指定的子网。我用的是 [WebMethod的] 在.aspx页面上的返回值。 ASP.NET的内置JSON序列做魔术回到我的JavaScript中使用的实际JSON。

我已异形的服务器端的时间，大约需要8毫秒来填充和返回的列表中，所以在服务器端code是不是问题。

然而，当启动Ajax调用，在Internet Explorer中可以采取以上3秒来填充列表框与IP地址返回的小单子。在Firefox中，列表框基本上填充瞬间。

我不能完全肯定瓶颈在哪里可以。我最好的猜测是错在于IE6的JavaScript引擎，但即便如此，只增加255列表项不应该采取这么多的时间。

任何人都可以点我在正确的方向，为什么会这样？

示例code

  $。阿贾克斯（{
          键入：POST，
          网址：$（Example.aspx / GetIPsOnNetwork
          数据：{NetworkID：+ networkID +}，
          的contentType：应用/ JSON的;字符集= UTF-8，
          数据类型：JSON，
          成功：功能（数据）{
            $（'＃ipAddresses）空（）;
            //循环遍历每个IP地址，并把它添加到列表框中
            $每个（data.d，函数（）{
                变种的ip = this.toString（）;
                $（document.createElement方法（'选项'））ATTR（'值'，IP）的.text（IP）.appendTo（'＃ipAddresses）。
            }）;
          }，
          错误：函数（MSG）{
            警报（错误：+味精）;
          }
        }）;
 

解决方案

这可能是一个呈现的问题。试试这个

 成功：功能（数据）{
        //循环遍历每个IP地址，并把它添加到列表框中
        VAR列表= $（＆LT;选择/＆gt;中）;
        $每个（data.d，函数（）{
            变种的ip = this.toString（）;
            list.append（$（'＆LT;选项/>').val(ip).text(ip））;
        }）;
        $（'＃ip地址），空（）追加（list.find（'选项'））;
      }，
 

基本上，你正在做的是加载选项变成一个虚拟列表，然后你要添加的内容到ipAddresses列表。什么

这是我改变的另一件事是使用document.createElement（...）。如果你看看 $的内部（'＆LT;选项/＆GT;'）它执行的createElement你

最后，我选择附加，而不是调用 option.appendTo（'＃ip地址）中的数据列表，这将有充分的时间来寻找ip地址的元素。

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.

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.

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.

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.

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

解决方案

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.

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

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.

这篇关于jQuery的Ajax调用在IE在Firefox很慢，但瞬间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！