添加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); ?