createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。将要添加的节点一次性放入节点碎片中,然后进行一次DOM操作添加节点即可。
优化前:
<div id="wrap"></div>
<script>
let wrap = document.getElementById("wrap");
for(let i = 0; i < 10; i++){
let li = document.createElement("li");
let text = document.createTextNode("hello" + i);
li.appendChild(text);
wrap.appendChild(li);
}
</script>
优化后:
<div id="wrap"></div>
<script>
let wrap = document.getElementById("wrap");
let documentFragment = document.createDocumentFragment();
for(let i = 0; i < 10; i++){
let li = document.createElement("li");
let text = document.createTextNode("hello" + i);
li.appendChild(text);
documentFragment.appendChild(li);
}
wrap.appendChild(documentFragment);
</script>