[Javascript] Efficiency of innerHTML over DOM tree manipulation

[Paul Novitski]

At 04:15 AM 6/28/2006, Matt Barton wrote:
>I've hit a problem with my companies web application in that I need 
>to dynamically create a (potentially very large) number of html 
>select controls in a page, in javascript.
>
>We have been, up to now, using the innerHTML property of a parent 
>div to plant the select control code in the correct place in the page.
>
>However, of late, we have seen our pages which do involve a large 
>number of these dynamically created select controls running much 
>slower than we would ideally like.

When you say "running," do you mean that page-generation is slow or 
that the browser seems sluggish after all the controls have 
generated?  The replies to your posting so far seem to address the 
comparative speeds of element-generation, but I wonder if your 
fully-generated page is slow simply because it's got so many controls 
and is challenging the browser's ability to keep so many fingers in 
so many pies.  If that's the case, then how you generate the page 
might not be the issue; I'd look closely at ways to split it up into 
multiple pages as Nick suggested.


>My question to the group is, would there be any intrinsic efficiency 
>benefit in our switching to use the DOM tree manipulation method 
>that some ajax programmers use to insert html snippets into web pages?

I'd think that Ajax/XMLHttpRequest would be one of the slower methods 
of adding incremental content to a page.  Rather than go back to the 
server for additional content, I'd look closer to home.  If you're 
adding gazillions of controls to your page, are they very similar to 
one another?  Do they repeat, either individually or in groups?  If 
so, I'd put a template on the page, and for each iteration I'd copy 
it en masse and modify it for your purposes.

(I'm imagining, for example, a table of input fields and many rows.)

Your approach might also depend on whether the range of possible 
controls varies from 1 to 1000 or, say, from 900 to 1000.  If you're 
already going to download a huge page then I'd consider pre-creating 
the necessary controls and hiding them with CSS until needed.

Regards,
Paul