                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /DOM探索之基础详解篇

请问createDocumentFragment的主要用在什么地方，我直接在ul#list-node中添加也可以实现同样的效果

我直接在ul#list-node中添加也可以实现同样的效果

// var frag = document.createDocumentFragment();

var frag = document.getElementById("list-node");

for(var x = 0;x<10;x++){

var li = document.createElement("li");

li.innerHTML = "List item " + x;

frag.appendChild(li);

}

// document.getElementById("list-node").appendChild(frag);

</script>

吃鱼的木头

2016-06-16

源自：DOM探索之基础详解篇 2-3

关注问题我要回答

1199

操作

收起

3 回答

lhliangstar 回答被采纳 +3 积分
2016-06-17

添加多个dom元素时，先将元素append到DocumentFragment中，最后统一将DocumentFragment添加到页面。该做法可以减少页面渲染dom元素的次数。添加元素增多时候，效率能提高。

2 回复有任何疑惑可以回复我~

收起回答

DasiyOulu

厉害了我的哥！！

2016-11-29 回复有任何疑惑可以回复我~

吃鱼的木头提问者

非常感谢！

2016-12-11 回复有任何疑惑可以回复我~

慕无忌4172087
2020-04-13

原来如此！

0 回复有任何疑惑可以回复我~

收起回答

lhliangstar
2016-06-17

append 5000个节点的测试结果：

比较结果:
使用appendChild　逐个向DOM文档中添加5000个新节点用时：25毫秒
使用appendChild一次性向DOM文档中添加5000个新节点用时：21毫秒

测试代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>createDocumentFragment用时比较</title>
<style type="text/css">
#compare{color:red;}
</style>
</head>
<body>
<div id="compare">
比较结果:<br>
</div>
<ul id="test1">
逐个添加
</ul>
<ul id="test2">
一次性添加
</ul>
<script>
var time1=null;
var time2=null;
time1 = new Date().getTime();
var nodetest1= document.getElementById("test1");
for (var i = 0; i < 5000; i++)
{
    var li = document.createElement('li');
    li.innerHTML = "列表A" +i;
    nodetest1.appendChild(li);
}
time2 = new Date().getTime();
//alert(time2-time1);
//使用createDocumentFragment()一次性向DOM文档中添加5000个新节点：
var time3=null;
var time4=null;
time3 = new Date().getTime();
var nodetest2=document.getElementById("test2");
var frag = document.createDocumentFragment();
for (var i = 0; i < 5000; i++)
{
    var li = document.createElement('li');
    li.innerHTML = "列表B" +i;
   frag.appendChild(li);
}
nodetest2.appendChild(frag);
time4 = new Date().getTime();
//alert(time4-time3);

var compareinf=document.getElementById("compare");
compareinf.innerHTML+="使用appendChild　逐个向DOM文档中添加5000个新节点用时："+(time2-time1)+"毫秒"+"<br>";
compareinf.innerHTML+="使用appendChild一次性向DOM文档中添加5000个新节点用时："+(time4-time3)+"毫秒"+"<br>";

</script>
</body>
</html>