读书人

平添DOM元素的优化方案(appendChild优

发布时间: 2012-09-10 11:02:33 作者: rapoo

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

读书人网 >Web前端

热点推荐