请问createDocumentFragment的主要用在什么地方，我直接在ul#list-node中添加也可以实现同样的效果
吃鱼的木头
2016-06-16 09:31
我直接在ul#list-node中添加也可以实现同样的效果
<ul id="list-node"></ul>
<script>
// 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>
3回答
-
- lhliangstar
- 2016-06-17 12:24:03
添加多个dom元素时，先将元素append到DocumentFragment中，最后统一将DocumentFragment添加到页面。 该做法可以减少页面渲染dom元素的次数。添加元素增多时候，效率能提高。
-
- 慕无忌4172087
- 2020-04-13 18:51:29
原来如此！
-
- lhliangstar
- 2016-06-17 13:02:27
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>
DOM探索之基础详解篇
98374 学习 · 238 问题
相似问题