document.createDocumentFragment()的作用是什么

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/