CODEWITHSUNDEEP
javascriptperformanceinternet-explorer-8internet-explorer-9
GrzesiekC
GrzesiekC

Reputation: 37

Why IE8 is faster than IE9 on this javascript execution?

Like in the title I have quite unusual problem. I'm working on web app which has a view which is rendered quite fast in IE8 and much slower in IE9.

Profiler says that the most time consuming function is this:

function handleTree(request, rootTagName) {
  var text = request.responseText;
  var startIndex = text.indexOf("<" + rootTagName + ">");
  var endIndex = text.indexOf("</" + rootTagName + ">");
  var newHtml = text.substring(startIndex + rootTagName.length + 2, endIndex);
  var treeContainer = getCachedElement("tree");
  treeContainer.innerHTML = newHtml;
  AjaxRequestEnd();

}

I checked in debugger and only in the line 

treeContainer.innerHTML = newHtml;

execution stops for a while. The treeContainer is an empty div element. The inserted html is pretty big so I suppose it's because of constructing the dom tree.

But still, before IE even calls this function, it's hanging for a few seconds. As I mentioned, on IE8 everything works faster. Any ideas?

Edit: I know I didn't provide too detailed description but I don't have any ideas what else can be important in this context.

Upvotes: 0

Views: 215

Answers (1)

Greg Burghardt
Greg Burghardt

Reputation: 18928

It might be the string manipulation you are doing before assigning the innerHTML property. A regular expression might speeds things up:

function handleTree(request, rootTagName) {
  var treeContainer = getCachedElement("tree");

  treeContainer.style.display = "none";
  treeContainer.innerHTML = request.responseText
    .replace(new RegExp("<" + rootTagName + ">(.+?)</" + rootTagName + ">"), "$1");
  treeContainer.style.display = "";

  AjaxRequestEnd();
}

If that doesn't help, you are probably running into a performance issue in IE9 when it parses the HTML.

This other Stack Overflow question might be worth a read too:

Bad performance IE using documentFragment

The treeContainer, if visible and attached to the document, might be treated differently. Try setting its display style to "none", then set the innerHTML, then set the display back to an empty string to see if that makes a difference.

Upvotes: 1

Related Questions