减少DOM数可以加快浏览器的在解析页面过程中DOM Tree和render tree的构建，从而提高页面性能。为此我们可以把页面中那些首屏渲染不可见的部分HTML暂存在TextArea中，等完成渲染后再处理这部分HTML来达到这个目的。 要把TextArea 中暂存的HTML内容添加到页面中，使用元素的outHTML属性是最简单方便的了,不过在DOM标准中并没有定义outHTML，支持的浏览器有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<n; i++){ fragment.appendChild(div.childNodes[i]); } this.parentNode.replaceChild(fragment, this); }); // HTMLElement.prototype.__defineGetter__("outerHTML",function(){ var tag = this.tagName; var attributes = this.attributes; var attr = []; //for(var name in attributes){//遍历原型链上成员 for(var i=0,n = attributes.length; i<n; i++){//n指定的属性个数 if(attributes[i].specified){ attr.push(attributes[i].name + '="' + attributes[i].value + '"'); } } return ((!!this.innerHTML) ? '<' + tag + ' ' + attr.join(' ')+'>'+this.innerHTML+'</'+tag+'>' : '<' + tag + ' ' +attr.join(' ')+'/>'); }); } 代码说明：
1 代码中首先条件判断来监测浏览器是否支持outerHTML以避免覆盖浏览器原生的实现。
2 "__defineSetter__"，"__defineGetter__" 是firefox浏览器私有方面。分别定义当设置属性值和获取属性要执行的操作。
3 在"__defineSetter__" "outerHTML"中为了避免插入页面中元素过多导致频繁发生reflow影响性能。使用了文档碎片对象fragment来暂存需要插入页面中DOM元素。
4 在"__defineGetter__" "outerHTML" 中使用元素attributes属性来遍历给元素指定的属性。结合innerHTML返回了包含原属本身在内的html字符串。
测试代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>outerHTML</title> </head> <body> <div id="content" class="test"> <p>This is <strong>paragraph</strong> with a list following it</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> <script> 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<n; i++){ fragment.appendChild(div.childNodes[i]); } this.parentNode.replaceChild(fragment, this); }); // HTMLElement.prototype.__defineGetter__("outerHTML",function(){ var tag = this.tagName; var attributes = this.attributes; var attr = []; //for(var name in attributes){//遍历原型链上成员 for(var i=0,n = attributes.length; i<n; i++){//n指定的属性个数 if(attributes[i].specified){ attr.push(attributes[i].name + '="' + attributes[i].value + '"'); } } return ((!!this.innerHTML) ? '<' + tag + ' ' + attr.join(' ')+'>'+this.innerHTML+'</'+tag+'>' : '<' + tag + ' ' +attr.join(' ')+'/>'); }); } var content = document.getElementById("content"); alert(content.outerHTML) </script> </body> </html>
