JQuery Ajax is a very slow call in IE, but instantly in Firefox

Question

I am .ajax() jQuery .ajax() call that returns a List<string> IP addresses in the specified subnet. I use [WebMethod] on the .aspx page to return values. ASP.NET's built-in JSON serializer does the magic to return the actual JSON used in my Javascript.

I have profiled the time on the server side, and it takes about 8 ms to populate and return the list, so server code is not a problem.

However, when an Ajax call is initiated, Internet Explorer may take up to 3 seconds to populate a list with a small list of returned IP addresses. In Firefox, the list is essentially populated instantly.

I'm not quite sure where the bottleneck could be. My best guess is that the error is related to the IE6 javascript engine, but even so, adding only 255 list items should not take much time.

Can someone point me in the right direction why this is happening?

Code example

 $.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

This could be a rendering problem. try it

  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 do is loading options into a dummy list, then you add content to the ipAddresses list.

Another thing I changed was document.createElement(...) . If you look at the internal elements of $('<option />') , it executes the createElement element for you.

Finally, I want to add data to the list instead of calling option.appendTo('#ipAddress') , which will have to find the ipAddress element each time.

Answer 2

I suspect that this may be the difference in the speed of creating option elements in IE and adding each of them to the DOM.

In this line

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

You can try

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

or this (data.d is an object, right?)

 var optionArray = []; var i = 0; $.each(data.d, function(key, value) { optionArray[i++] = $('<option>').val(value).text(value); }); $('#ipAddresses').empty().append(optionArray.join("")); 

You may find this article useful jQuery append () article

Answer 3

Creating elements using the recommended methods for creating the DOM is extremely slow compared to the non-standard yet ubiquitous .innerHTML property. I once had to update a table with about 100 rows, and just as you did, the older the browser, the slower the operation using element creation. If you can, create a dummy SELECT element, and populate it with a manually cascading HTML string of your OPTION elements, and then use .innerHTML on your dummy Object Selection. Then you can do whatever you want with this element (using .replaceChild, etc.).

Despite the fact that this is a non-standard way to create an element, .innerHTML is going to stay with us for a long, long time, and it is very fast.

Answer 4

I found that the jqueyry append is very slow compared to innerHTML in IE7. Firefox and Chrome seem to display at the same speed using either append or innerHTML. This may have something to do with what Salariman said about the methods for creating the DOM.