Ways to increase performance when set big value to innerHTML

Question

I'm trying to set a huge (200K) response to innerHTML of a node. The goal is to get better time than 2.7 sec in Internet Explorer 6.

Any ideas?

Answer 1

This won't make it happen any faster but it will stop the browser from locking up on the user; they can continue to use the page while this happens in the background:

function asyncInnerHTML(HTML, callback) {
    var temp = document.createElement('div'),
        frag = document.createDocumentFragment();
    temp.innerHTML = HTML;
    (function(){
        if(temp.firstChild){
            frag.appendChild(temp.firstChild);
            setTimeout(arguments.callee, 0);
        } else {
            callback(frag);
        }
    })();
}

Using it:

var allTheHTML = '<div><a href="#">.............</div>';
asyncInnerHTML(allTheHTML, function(fragment){
    myTarget.appendChild(fragment); // myTarget should be an element node.
});

This technique will take longer than plain innerHTML but the user will be able to carry on using your site without noticing a delay.