标签：
document.createDocumentFragment()的作用是什么:
createDocumentFragment()函数可能用的并不是太多，之所以这样是因为不使用此方法完全可以实现所有的功能，但是如果能够妥当的使用此函数可以有效的提高执行效果，下面就通过实例简单介绍一下次函数用法。
先看一段代码实例:
var myArray=new Array("一","二","三","四","五","六"); window.onload=function() { for(var i=0;i<6;i++) { var odiv=document.createElement("div"); var theText=document.createTextNode("蚂蚁部落"+myArray[i]); odiv.appendChild(theText); document.body.appendChild(odiv); } }
以上代码可以依次输出"蚂蚁部落X"。怎么实现的非常简单，这里就不多说。其实上面的代码在执行效率方面还有提高的余地，因为每调用document.body.appendChild()都会渲染一次页面，执行效率自然就会降低，这个时候createDocumentFragment()函数的作用就会得到体现了，代码修改如下:
var myArray=new Array("一","二","三","四","五","六"); var myFragment=document.createDocumentFragment(); window.onload=function() { for(var i=0;i<6;i++) { var odiv=document.createElement("div"); var theText=document.createTextNode("蚂蚁部落"+myArray[i]); odiv.appendChild(theText); myFragment.appendChild(odiv); document.body.appendChild(myFragment) } }
以上代码使用实现了同样的功能，不过页面只渲染一次就可以了，执行效果当然就高了。
createDocumentFragment()函数:
此函数可以创建一个文档碎片节点。但是此函数创建的节点在文档中没有对应的标记，也就无法在页面中进行渲染，但总归是个节点，具有一般节点所具有特性，例如可以使用appendChild()等方法。
上面的代码实例说明使用此方法可以减少渲染次数，其实这个要分情况的，如果目标节点已经在文档中存在的情况下，使用此方法可以提高效率，如果目标节点在文档中不存在，需要动态创建的话，然后再进行添加同样也只是渲染一次，代码实例如下:
var myArray=new Array("一","二","三","四","五","六"); var fatherDiv=document.createElement("div"); window.onload=function() { for(var i=0;i<6;i++) { var odiv=document.createElement("div"); var theText=document.createTextNode("蚂蚁部落"+myArray[i]); odiv.appendChild(theText); fatherDiv.appendChild(odiv); document.body.appendChild(fatherDiv) } }
以上代码中，没有使用createDocumentFragment()函数同样只渲染一次。
所以说要理解在何种场景下使用才能够提高效率，而不是死记硬背。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8439
更多内容可以参阅:http://www.softwhy.com/javascript/
document.createDocumentFragment()的作用是什么
标签：
原文地址：http://www.cnblogs.com/come-on/p/5084489.html
