3

使用文档片段或未附加的创建的 div 以避免多次命中 DOM 之间有区别吗？

假设我们要生成 100 个列表项......

我们页面的内容：

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

场景一：文档片段

在这种情况下，我们正在创建 li，用一些简单的文本填充它，然后将其附加到片段中。循环完成后，片段将附加到列表中。我们避免对 DOM 100x 执行 ping 操作，并且仅 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 而言，似乎两者都达到了相同的结果。

4

1 回答 1

1

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

你可以做的是：

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

但这也会插入 div。这就是片段存在的原因，以便能够一次插入多个元素，而无需可能破坏您的 html 结构的包装元素。

你也可以这样做：

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

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

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

于 2016-04-09T18:53:50.937 回答