innerHTML的性能问题

看到一遍文章When innerHTML isn’t Fast Enough，反应了innerHTML在操作量大了以后的性能下降的问题。
并且给出了一个replaceHTML的函数

1. function replaceHtml(el, html) {
2. var oldEl = typeof el === "string" ? document.getElementById(el) : el;
3. /*@cc_on // Pure innerHTML is slightly faster in IE
4. oldEl.innerHTML = html;
5. return oldEl;
6. @*/
7. var newEl = oldEl.cloneNode(false);
8. newEl.innerHTML = html;
9. oldEl.parentNode.replaceChild(newEl, oldEl);
10. /* Since we just removed the old element from the DOM, return a reference
11. to the new element, which can be used to restore variable references. */
12. return newEl;
13. };

function replaceHtml(el, html) {
	var oldEl = typeof el === "string" ? document.getElementById(el) : el;
	/*@cc_on // Pure innerHTML is slightly faster in IE
		oldEl.innerHTML = html;
		return oldEl;
	@*/
	var newEl = oldEl.cloneNode(false);
	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;
};

用这个函数来代替innerHTML后在不同浏览器中的性能表现为：
Safari 3:
5000 elements…
innerHTML (destroy only): 63ms
innerHTML (create only): 390ms
innerHTML (destroy & create): 484ms
replaceHtml (destroy only): 47ms (1.3x faster)
replaceHtml (create only): 15ms (26.0x faster)
replaceHtml (destroy & create): 62ms (7.8x faster)
Done.
10000 elements…
innerHTML (destroy only): 110ms
innerHTML (create only): 3500ms
innerHTML (destroy & create): 4735ms
replaceHtml (destroy only): 110ms (~ same speed)
replaceHtml (create only): 31ms (112.9x faster)
replaceHtml (destroy & create): 141ms (33.6x faster)
Done.

Firefox 3:
5000 elements…
innerHTML (destroy only): 863ms
innerHTML (create only): 522ms
innerHTML (destroy & create): 1421ms
replaceHtml (destroy only): 20ms (43.1x faster)
replaceHtml (create only): 225ms (2.3x faster)
replaceHtml (destroy & create): 239ms (5.9x faster)
Done. 10000 elements…
innerHTML (destroy only): 5521ms
innerHTML (create only): 2626ms
innerHTML (destroy & create): 8528ms
replaceHtml (destroy only): 39ms (141.6x faster)
replaceHtml (create only): 373ms (7.0x faster)
replaceHtml (destroy & create): 422ms (20.2x faster)
Done.

Opera 9.5:
5000 elements…
innerHTML (destroy only): 16ms
innerHTML (create only): 141ms
innerHTML (destroy & create): 94ms
replaceHtml (destroy only): 16ms (~ same speed)
replaceHtml (create only): 78ms (1.8x faster)
replaceHtml (destroy & create): 125ms (1.3x slower)
Done.
10000 elements…
innerHTML (destroy only): 31ms
innerHTML (create only): 156ms
innerHTML (destroy & create): 312ms
replaceHtml (destroy only): 31ms (~ same speed)
replaceHtml (create only): 203ms (1.3x slower)
replaceHtml (destroy & create): 157ms (2.0x faster)
Done.

IE7:
1000 elements…
innerHTML (destroy only): 0ms
innerHTML (create only): 0ms
innerHTML (destroy & create): 0ms
replaceHtml (destroy only): 0ms (~ same speed)
replaceHtml (create only): 0ms (~ same speed)
replaceHtml (destroy & create): 0ms (~ same speed)
Done.
15000 elements…
innerHTML (destroy only): 31ms
innerHTML (create only): 156ms
innerHTML (destroy & create): 172ms
replaceHtml (destroy only): 32ms (~ same speed)
replaceHtml (create only): 157ms (~ same speed)
replaceHtml (destroy & create): 188ms (1.1x slower)
Done.

似乎在IE上没有什么改进，但是在其它浏览器上效果明显。

经常使用的prototype.js里是调用Element.update(element,content)来完成innerHTML操作的，打开prototype.js文件，修改update的部分

1. update: function(element, content) {
2. element = $(element);
3. if (content && content.toElement) content = content.toElement();
4. if (Object.isElement(content)) return element.update().insert(content);
5. content = Object.toHTML(content);
6. element.innerHTML = content.stripScripts();
7. content.evalScripts.bind(content).defer();
8. return element;
9. },

update: function(element, content) {
    element = $(element);
    if (content && content.toElement) content = content.toElement();
    if (Object.isElement(content)) return element.update().insert(content);
    content = Object.toHTML(content);
    element.innerHTML = content.stripScripts();
    content.evalScripts.bind(content).defer();
    return element;
  },

用replaceHTML函数代替element.innerHTML = content.stripScripts();这行就可以了。

1. update: function(element, content) {
2. element = $(element);
3. if (content && content.toElement) content = content.toElement();
4. if (Object.isElement(content)) return element.update().insert(content);
5. content = Object.toHTML(content);
6. element = replaceHtml(element, content.stripScripts());
7. content.evalScripts.bind(content).defer();
8. return element;
9. },

update: function(element, content) {
    element = $(element);
    if (content && content.toElement) content = content.toElement();
    if (Object.isElement(content)) return element.update().insert(content);
    content = Object.toHTML(content);
    element = replaceHtml(element, content.stripScripts());
    content.evalScripts.bind(content).defer();
    return element;
  },