請問createDocumentFragment的主要用在什么地方，我直接在ul#list-node中添加也可以實現同樣的效果
我直接在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>
2016-06-17
添加多個dom元素時，先將元素append到DocumentFragment中，最后統一將DocumentFragment添加到頁面。 該做法可以減少頁面渲染dom元素的次數。添加元素增多時候，效率能提高。
2020-04-13
原來如此！
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>