fragment 是一个指向空DocumentFragment对象的引用。
描述
DocumentFragments (en-US) 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到 DOM 树。在 DOM 树中,文档片段被其所有的子元素所代替。
因为文档片段存在于内存中,并不在 DOM 树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。
主要用于插入时提升性能
let res = document.querySelector('.res')
let frag = document.createDocumentFragment()
for(let i =0 ;i<10;i++){
let btn=document.createElement("button")
btn.innerHTML=`${i}`
frag.append(btn)
btn.onclick=function(){
alert(i)
}
}
res.append(frag)