Question

使用文档片段或未附加创建的div来避免对DOM进行多次点击是否有区别？

我们说我们要生成100个列表项......

我们的页面内容：

 <ul class="list"></ul>

场景1：文档片段

在这种情况下，我们正在创建li，用一些简单的文本填充它，然后将其附加到片段。循环完成后，片段将附加到列表中。我们避免ping DOM 100x并只ping一次以附加片段。

var frag = document.createDocumentFragment();
for(var i = 1; i <= 100; i++) {
  var li = document.createElement('li');
  li.textContent = 'Item #' + i;
  frag.append(li);
}

document.querySelector('.list').appendChild(frag);

场景2：未附加的div

在这种情况下，我们创建一个行为的div，就像文档片段一样，因为它不在DOM中。我们将所有创建的li附加到div中，然后最终将div的内容附加到DOM中的列表中。

var div = document.createElement('div');
for(var i = 1; i <= 100; i++) {
  var li = document.createElement('li');
  li.textContent = 'Item #' + i;
  div.append(li);
}

document.querySelector('.list').innerHTML = div.innerHTML;

这两种情景之间的区别是什么？至于避免多次ping DOM，似乎两者都能达到相同的结果。

Answer 1

第二个例子不起作用函数appendChild必须接受一个对象，但div.innerHTML返回一个字符串。

你可以做的是：

document.querySelector('.list').appendChild(div);

但那也会插入div。这就是片段存在的原因，为了能够一次插入多个元素而没有可能破坏你的html结构的包装元素。

你也可以这样做：

document.querySelector('.list').innerHTML = div.innerHTML;

但随后变量li不再引用DOM中的li元素。 DOM中的元素是从div.innerHTML字符串创建的新元素。

例如，如果您向元素添加了一些事件侦听器，则它们将不再起作用。

文档片段VS创建了未附加的div

1 个答案: