Question

建议使用documentFragment将元素插入DOM。假设我想创建一个ul列表并将其插入到DOM中，所以我执行以下操作：

var ul = document.createElement('ul');
var li = document.createElement('li');
ul.appendChild(li);
document.body.appendChild(ul);

为什么我需要在这里使用documentFragment？

Answer 1

您不需要，不，您可以直接插入DOM。文档片段对于构建没有单个根的结构，复制和粘贴操作以及非DOM操作非常有用，但是您不需要仅仅附加到DOM。

Answer 2

我认为这取决于。当你只需要插入一堆Node s时，直接附加它们就可以了。在您的问题中，ul和li都在内存中创建和操作，然后插入到DOM中。因此，根本不需要使用DocumentFragment。但是，例如，如果您需要根据收集模型将多个li插入DOM中的ul，我建议您使用DocumentFragment插入li一次性而不是追加li次。这是因为操作DOM很昂贵，使用DocumentFragment可以减少对DOM的操纵并加快DOM。见下面的差异。

var data = [1, 2, 3, 4], ul = document.getElementById('#ul')

// solution 1
for (var i = 0, length = data.length; i < length; i++) {
    var li = document.createElement('li')
    li.innerText = data[i]
    ul.appendChild(li)
}

// solution 2
var fragment = document.createDocumentFragment()
for (var i = 0, length = data.length; i < length; i++) {
    var li = document.createElement('li')
    li.innerText = data[i]
    fragment.appendChild(li)
}
ul.appendChild(fragment)

解决方案1在每次迭代中创建li，并将新创建的li追加到ul。所以总共进行了4次DOM操作。解决方案2只创建li并在每次迭代中将其附加到片段中。它只在循环后运行DOM以将片段附加到ul。解决方案2中只有1个DOM操作。显然，在这个例子中，解决方案2是更好的选择。

Answer 3

文档片段继承了Node的方法，并实现了ParentNode接口的方法。

你可以这样做：

var fragment = new DocumentFragment();
var a = document.createElement('p');
fragment.appendChild(a);

我是否需要使用documentFragment插入UL列表

3 个答案: