解释:
let fragment = document.createDocumentFragment();//fragment 是一个指向空DocumentFragment对象的引用
DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。
因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。
测试功能: 给网页上动态增加1000个li。
多次点击按钮后,createDocumentFragment的时间:
多次点击按钮后,拼接HTML字符串的时间:
你会发现,整体上html字符串的 方式的性能优于createDocumentFragment。而且,第一次点击按钮时,拼接html字符串的方式,速度非常快。选哪个你自己定。当然,这两种方式比,循环过程中,创建一个DOM元素,appendChild一个DOM肯定快。
一、createDocumentFragment的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn01" value="测试" />
<ul id="box">
</ul>
</body>
</html>
<script type="text/javascript">
document.getElementById("btn01").onclick = function(){
var timeName;
console.time(timeName)
testf1();
console.timeEnd(timeName);
}
//使用createDocumentFragment.
function testf1(){
let fragment = document.createDocumentFragment();
for(var i=0;i<1000;i++){
let liDom = document.createElement("li");
liDom.innerHTML = `第${i}行`;
fragment.appendChild(liDom);
}
document.getElementById("box").appendChild(fragment);
}
</script>
二、使用字符串拼接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn01" value="测试" />
<ul id="box">
</ul>
</body>
</html>
<script type="text/javascript">
document.getElementById("btn01").onclick = function(){
var timeName;
console.time(timeName)
testf3();
console.timeEnd(timeName);
}
//拼接字符串,一次性appendChild
function testf3(){
let htmlStr = "";
for(var i=0;i<1000;i++){
htmlStr+=`<li>第${i}行</li>`;
}
let ulDom = document.getElementById("box");
ulDom.innerHTML = htmlStr;
}
</script>