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?,

Thanks

Answer 1

I've heard that innerText is about two times faster than innerHTML in IE. Not sure if it's true, though, but it might be worth a try.

if (window.ActiveXObject) { // we're using IE
    document.getElementById('myElement').innerText = 'Bla bla bla bla';
    // or create a textnode:
    var txt = document.createTextNode('Lorem ipsum');
    document.getElementById('myElement').appendChild(txt);
} else {
    // other code here
}

Update: Note that if you want to modify the HTML of myElement, don't use innerText – the HTML will be visible in plain text, like if you were using < and >.

Answer 2

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.

Answer 3

First off, I would make sure your HTML is as simple as possible. As minimal structure markup as possible. Use CSS everywhere, including its cascading feature so you're not setting class attribute everywhere, etc.

Then try some further research in the best methods per browser. For example, some do better by building DOM objects, some setting all of it to the innerHTML of a single non-tree DOM node then adding it to the tree, etc. I suggest you read Quirksmode.org's Benchmark - W3C DOM vs. innerHTML.

You'll also want to probably use a script like JimmyP suggested to add in chunks, so the browser UI doesn't appear to hang. Although, you don't want to split it up too much, or you'll be unnecessarily triggering too many page refreshes when you don't need them.

Answer 4

With a large HTML payload you run the risk of the "Operation Aborted" error in IE 6. Take some time and review the following StackOverflow questions, as the error arises from updating the DOM using innerHTML and to date MS does not have a complete fix in place:

Why Does Asp.net cause the operation aborted error in ie7?

How To Overcome IE Bug When Dynamically Attaching DIV To Body From Script?

Answer 5

Make the HTML as simple as possible, or use XML with the shortest possible element / attribute names.

Style with CSS (Don't use XML with XSLT, that could end up being even slower to parse / build).

The handling of XML in different browsers is not compatible unfortunately.

Answer 6

why not bring the response in json format and process it on the client side, for example here a big amount of data is driven each time you change any navigation option, and all rows are rendered by the client.

Answer 7

Make sure your JSON/HTML/Plain Text is as simple as possible. The easiest solution would be to do less work, but if you really do need to stream 200k, make sure the transport to the browser is compressed, which should be configurable in your app and/or web server. Gzip'ping content (assuming you're using an AJAX-friendly service) really does help out, especially with simple text.

Look at other things like any loops that can be simplified, etc., but it sounds like making sure the data is ready and making sure that data can be sent across the wire efficiently will be the most help.

If IE is the outlier and all other browsers work well, you might need to move on. There's only so much you can do, but I suspect it's not the main problem.