請(qǐng)問createDocumentFragment的主要用在什么地方，我直接在ul#list-node中添加也可以實(shí)現(xiàn)同樣的效果
我直接在ul#list-node中添加也可以實(shí)現(xiàn)同樣的效果
<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
添加多個(gè)dom元素時(shí)，先將元素append到DocumentFragment中，最后統(tǒng)一將DocumentFragment添加到頁(yè)面。 該做法可以減少頁(yè)面渲染dom元素的次數(shù)。添加元素增多時(shí)候，效率能提高。
2020-04-13
原來如此！
2016-06-17
append 5000個(gè)節(jié)點(diǎn)的測(cè)試結(jié)果：
比較結(jié)果:
使用appendChild 逐個(gè)向DOM文檔中添加5000個(gè)新節(jié)點(diǎn)用時(shí)：25毫秒
使用appendChild一次性向DOM文檔中添加5000個(gè)新節(jié)點(diǎn)用時(shí)：21毫秒
測(cè)試代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>createDocumentFragment用時(shí)比較</title>
<style type="text/css">
#compare{color:red;}
</style>
</head>
<body>
<div id="compare">
比較結(jié)果:<br>
</div>
<ul id="test1">
逐個(gè)添加
</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個(gè)新節(jié)點(diǎn)：
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 逐個(gè)向DOM文檔中添加5000個(gè)新節(jié)點(diǎn)用時(shí)："+(time2-time1)+"毫秒"+"<br>";
compareinf.innerHTML+="使用appendChild一次性向DOM文檔中添加5000個(gè)新節(jié)點(diǎn)用時(shí)："+(time4-time3)+"毫秒"+"<br>";
</script>
</body>
</html>