添加DOM元素的优化方案(appendChild优化)

/*节约使用DOM
        JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现、并重新渲染整个页面、从而有明显的时间消耗。比较快捷的方法就是尽可能不在页面进行DOM操作、如下例中为ul添加了10个条目。*/
view plain print ?
var  oUl = document.getElementById( "ulItem" );  
        for ( var  i=0;i<10;i++){  
            var  oLi = document.createElement( "li" );  
            oUl.appendChild(oLi);  
            oLi.appendChild(document.createTextNode("Item " +i));  
        }  

         /*以上代码在循环中调用oUl.appendChild(oLi)、每次执行这条语句后、浏览器就会重新渲染页面、其次给列表添加文本节点oLi.appendChild(document.createTextNode("Item "+i))、这也会造成页面被重新渲染。因此每次运行都会造成两次重新渲染页面、共20次。
        通常应当尽可能减少DOM的操作、将列表项目在添加文本节点之后在添加、并合理地使用createDocumentFragment()、代码如下：*/
view plain print ?
var  oUl = document.getElementById( "ulItem" );  
        var  oTemp = document.createDocumentFragment();  
        for ( var  i=0;i<10;i++){  
            var  oLi = document.createElement( "li" );  
            oLi.appendChild(document.createTextNode("Item " +i));  
            oTemp.appendChild(oLi);  
        }  
        oUl.appendChild(oTemp);