你的位置:首页 > Java教程

[Java教程]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/