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

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.