解释：
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>
