createDocumentFragment使用

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)