Sep
14
JavaScript – Squeezing performance out of the DOM
Steven Levithan, of RegexPal has come up with a great function for creating and destroying elements that is blazing fast compared to innerHTML.
1000 elements… innerHTML (destroy only): 156ms innerHTML (create only): 15ms innerHTML (destroy & create): 172ms replaceHtml (destroy only): 0ms (faster) replaceHtml (create only): 15ms (~ same speed) replaceHtml (destroy & create): 15ms (11.5x faster) 15000 elements… diamond rings . innerHTML (destroy only): 14703ms innerHTML (create only): 250ms innerHTML (destroy & create): 14922ms replaceHtml (destroy only): 31ms (474.3x faster) replaceHtml (create only): 250ms (~ same speed) replaceHtml (destroy & create): 297ms (50.2x faster)
/* This is much faster than using (el.innerHTML = str) when there are manyexisting descendants, because in some browsers, innerHTML spends much longerremoving existing elements than it does creating new ones. coldwellbanker . */function replaceHtml(el, html) { var oldEl = (typeof el === "string" ? document.getElementById(el) : el); var newEl = document.createElement(oldEl.nodeName); // Preserve the element's id and class (other properties are lost) newEl.id = oldEl.id; newEl.className = oldEl.className; // Replace the old with the new newEl.innerHTML = html; oldEl.parentNode.replaceChild(newEl, oldEl); /* Since we just removed the old element from the DOM, return a reference to the new element, which can be used to restore variable references. */ return newEl;};
RSS ?
