Javascript document.createDocumentFragment（）在追加后似乎变为空？

如果使用

document.createDocumentFragment（）

创建DocumentFragment，将子项附加到它，然后将缓冲区附加到某个对象，则缓冲区的所有子项似乎都会消失。例如：

var buffer = document.createDocumentFragment() ;

for (var i = 1; i <= 10; i++)
{
    var div = document.createElement('div');
    div.innerHTML = i;
    buffer.appendChild(div);
}

console.log( 'buffer: ' , buffer );

document.getElementById('container').appendChild(buffer);

console.log( 'buffer now: ' , buffer );

var buffer=document.createDocumentFragment（）；
对于（var i=1；i您刚刚描述了
DocumentFragment
的性质。如果要重用相同的内容，可以在每次将片段附加到文档之前克隆片段：

var bufferCopy = buffer.cloneNode(true);
document.getElementById('container').appendChild(bufferCopy);

不过，我认为它不会提供太多性能优势，是吗？如果您有10-100个子项要附加到缓冲区中？选项1：循环10-100个div并将它们附加到缓冲区中，然后在用户单击按钮时将缓冲区附加到dom中，或者选项2：克隆缓冲区并在第一次存储它，将来只需附加克隆的/cached缓冲区。使用选项2会有明显的性能优势吗？@ClickUpvote：我怀疑。使用
DocumentFragment
的主要优势在于防止在向DOM添加多个连续元素时出现不必要的浏览器回流/重绘。因此，组装片段的内容可能需要一段时间占总时间的比例很小，因此该部分可能带来的性能好处可能很小。@ClickUpvote：顺便说一句，在将缓冲区添加到文档之前，每次都需要克隆缓冲区。我希望示例不是生产代码，对吗？：-）