减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建，从而提高页面性能。为此我们可以把页面中那些首屏渲染不可见的部分HTML暂存在TextArea中，等完成渲染后再处理这部分HTML来达到这个目的。 要把TextArea 中暂存的HTML内容添加到页面中，使用元素的outerHTML属性是最简单方便的了,不过在DOM标准中并没有定义outerHTML，支持的浏览器有IE6+,safari, operal和 Chrome，经测试FF4.0- 中还不支持。所以我们就来实现一个可以跨浏览器的outerHTML。

outerHTML 就是获取或设置包含元素标签本身在内的html。下面是实现代码：

if(typeof HTMLElement !== "undefined" && !("outerHTML" in HTMLElement.prototype)) {	//console.log("defined outerHTML");	HTMLElement.prototype.__defineSetter__("outerHTML",function(str){		var fragment = document.createDocumentFragment();		var div = document.createElement("div");			div.innerHTML = str;					for(var i=0, n = div.childNodes.length; i
     
      '+this.innerHTML+'
      ' : 				 '<' + tag + ' ' +attr.join(' ')+'/>');	});}
     

代码说明：

1 代码中首先条件判断来监测浏览器是否支持outerHTML以避免覆盖浏览器原生的实现。

2 "__defineSetter__"，"__defineGetter__" 是firefox浏览器私有方面。分别定义当设置属性值和获取属性要执行的操作。

3 在"__defineSetter__" "outerHTML"中为了避免插入页面中元素过多导致频繁发生reflow影响性能。使用了文档碎片对象fragment来暂存需要插入页面中DOM元素。

4 在"__defineGetter__" "outerHTML" 中使用元素attributes属性来遍历给元素指定的属性。结合innerHTML返回了包含原属本身在内的html字符串。

测试代码：

     
     
	
      
This is paragraph with a list following it
	
      
    
       
Item 1
    
       
Item 2
    
       
Item 3
    
       
Item 4