星空网 > 软件开发 > 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/

 




原标题:document.createDocumentFragment()的作用是什么

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

高尔夫托运航空包:https://www.goluckyvip.com/tag/102841.html
空运的快递:https://www.goluckyvip.com/tag/102842.html
快递是空运:https://www.goluckyvip.com/tag/102843.html
航空托运包裹:https://www.goluckyvip.com/tag/102844.html
江门空运:https://www.goluckyvip.com/tag/102845.html
济南空运货:https://www.goluckyvip.com/tag/102846.html
23点聊电商:新质生产力加速数字贸易发展 卓尔智联集团实现营收利润双增长 :https://www.kjdsnews.com/a/1836411.html
南京浦口都有什么好玩的地方 南京浦口都有什么好玩的地方推荐:https://www.vstour.cn/a/363180.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流