IE too slow when adding a lot of HTML to the DOM via Javascript

Question

I have a page where we are using a Kendo UI template to generate a bunch of HTML to insert into the DOM. We are talking 2+ million bytes. All the other browsers will display this in about 2 to 3 seconds or so. I'm already avoiding jQuery and setting the innerHTML via the document.getByElementId call. It appears that the slowest part is regexp.test calls that IE makes. Is IE vaidating that all the start/end tags match? If so, is there a way to tell IE to skip this check to speed things up (ie "Trust me")? I've already reduced the HTML needed to as small as possible already, so that is really no longer an option. Also, the data I'm showing isn't even the largest dataset yet, so I know it'll get a lot bigger. Does anyone have any ideas?

Update:

This is the current code I'm using:

 var resultHtml = kendo.template(templateHtml, { useWithBlock: false })(currentPage.ViewModel);
 resultHtml = resultHtml.replace(new RegExp("\>[\n\t ]+\<", "g"), "><"); // Get rid of whitespace
 document.getElementById("tblData").innerHTML = resultHtml;

In IE, this ends up taking about 10 seconds to show with 2.5 million characters being generated. In Chrome/FireFox/Opera, this takes about 2 to 3 seconds.

Answer 1

Implement something like "double buffering".

Create a node that is not part of the DOM.

var offlineNode = $('<div />');

Render your contents to the offline node.

offline.html(kendoTemplate(billionData));    

Once you finish, move the entire node to the DOM.

offlineNode.appendTo($('#a-place-in-dom'));

IE has problems guessing when to re-render the page, so it is sensible to DOM manipulation. Every time you make massive DOM changes, IE will be slow.

Answer 2

The problem does not appear to be the HTML being added to the DOM now. It has to do with all the objects I have to 2-way bind with Kendo MVVM. Sorry about that!