[Javascript] Efficiency of innerHTML over DOM tree manipulation

[Nick Fitzsimons]

Matt Barton wrote:
> 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?
> 
> Is either method more efficient than the other?
> 

ppk has run some tests concerning this issue; the results are at:
<http://www.quirksmode.org/dom/innerhtml.html>

I would suggest from my own experience that you carry out your own tests 
as results can vary considerably depending on your specific purpose, and 
on which browsers you want to fully support. In particular, most 
browsers show much faster results if a new DOMElement has all its child 
nodes added _before_ it is appended to its parentNode rather than after; 
a test which only tries the latter will give you misleading results.

OTOH, it may be better to reduce the complexity of the screens in your 
application; this will, as a general rule, enhance usability. Multiple 
selects, each with vast numbers of options, are not to be recommended as 
a good user interface. More screens with fewer choices will 
(counter-intuitively) lead to user perceptions of the application being 
quicker and easier to use, despite having more steps per task.

HTH,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/