Increase DOM Node Insertion Performance
Date : 2008 07 21 Category : Tech & Development
AjaxianJohn Resig continues his streak of compelling blog entries with "DOM DocumentFragments" where he shows that:
A method that is largely ignored in modern web development can provide some serious (2-3x) performance improvements to your DOM manipulation.
The technique shown is compatible across a large swath of modern browsers, including our friend IE6. Here's an example of using DocumentFragments:
PLAIN TEXT JAVASCRIPT: var div = document.getElementsByTagName("div"); var fragment = document.createDocumentFragment(); for ( var e = 0; e <elems.length; e++ ) { fragment.appendChild( elems[e] ); } for ( var i = 0; i <div.length; i++ ) { div[i].appendChild( fragment.cloneNode(true) ); }