Why is jQuery Ajax so slow on IE7?

Question

I am having a problem with jQuery AJAX calls on IE7. This simple code works fine on FF and Opera. But on IE7 it takes 3-5sec. - that's 20 times slower than FF! Loading content is pure HTML and inline JavaScript code. No JS rendering. I even turned of the inline JavaScript code. Bu still slow.

$('#block').load('some url');

How to overcome this problem ? Any help would be greatly appreciated.

Answer 1

How to overcome this problem ? Any help would be highly appreciated.

Detect IE7 on page load, and provide a discrete suggestion that users who don't like slow loading should upgrade.

Answer 2

There's really not much you can do. IE's javascript engine is way way slower than any of the others (in fact, it sucks). You can try out IE8. It is better... marginally...

Answer 3

I had the same problem with the slow jscript ie7 engine. I added a status popup window for the human. I update the status window as the JS proceeds in chunks. Pseudo code:

1. Create a status container using your favorit js library. I prefer YUI. See their container api.
2. Do some of your data load. -- you'll first need to split it into chunks
3. Update the status popup. (Increment the % load completed, increase a bar indicator, etc.) Note that the screen probably won't change at this point since your JS thread is still running.
4. Next, call

var t = setTimeout("next_step(2)", 0);
// Where arg of 2 would mean do the second step
// This will yield to the browser, and the display will then be updated.
// If you want to maintain the value of "this" in the function, then do
// something like
var t = setTimeout("next_step.call(MyContext, 2)", 0);
// using call to set the function's context.

Bottom line is that the user will see something changing on the screen. Note that the step of yielding with a timeout of 0 takes quite a while, relatively speaking. So my code tests the browser and does more work per chunk if it's anything other than IE.

It is very important to provide changing feedback to the user. Otherwise they think it is taking longer than it really is.

HTH,

Larry

Answer 4

I'd have to see the actual code but faced to a similar problem I had to get rid of jQuery.load(). Instead, I used jQuery.get() with "html" data type and wrote my own callback, where I injected the data via .innerHTML. Doing so, I also hit another bug (it was a <select> tag and IE won't allow .innerHTML on it) so I wrote an ugly workaround.

Resulting code was something like this:

// Fetch data (GET method allows me to use browser cache)
$.get(url, get, function(htmlValues, txtStatus){
   that.populateSelects(htmlValues, that.selectContainers);
}, "html");


// Create <select>
var select = $('<span><select disabled="disabled"></select></span>');
$("<option>").attr("value", "").text("Loading...").appendTo(select.find("select"));


// Populate <select>
that.populateSelects = function(values, selectContainers){
   var span, select, tags;

   for(var i=0, len=selectContainers.length; i<len; i++){
      span = selectContainers[i];

      if($.browser.msie){
         tags = span.innerHTML.match(/^(<select[^>]+>).*(<\/select>)$/i);
         span.innerHTML = tags[1] + values + tags[2];
         select = span.firstChild;
      }else{
         select = span.firstChild;
         select.innerHTML = values;
      }
      $(select).removeAttr("disabled");
   }
}