为什么比使用javascript片段更快地追加到DOM中尚未包含的元素？ [英] Why is appending to an element not yet in the DOM faster than using a javascript Fragment?

问题描述

考虑这三个版本将 li 附加到 ul ：

Consider these three versions of appending lis to a ul:

Naive Version（慢20％）：

Naive Version (20% slower):

var ul = document.getElementById('targetUl');

for (var i = 0; i < 200; i++) {
  var li = document.createElement('li');
  li.innerHTML = Math.random();
  ul.appendChild(li);
}

使用JavaScript片段（慢4％）：

Using a JavaScript Fragment (4% slower):

var ul = document.getElementById('targetUl'),
    fragment = document.createDocumentFragment();

for (var i = 0; i < 200; i++) {
  var li = document.createElement('li');
  li.innerHTML = Math.random();
  fragment.appendChild(li);
}
ul.appendChild(fragment);

追加尚未加入DOM的元素（快1.26％）：

Appending to an element not yet in the DOM (1.26% faster):

var ul = document.createElement('ul'),
    div = document.getElementById('targetDiv');

for (var i = 0; i < 200; i++) {
  var li = document.createElement('li');
  li.innerHTML = Math.random();
  ul.appendChild(li);
}
div.appendChild(ul);

为什么追加到内存中的DOM元素比附加到更快片段？由于片段是为了这个唯一目的而创建的，不应该更快吗？对于在内存中保留的元素使用片段它们是否有任何好处，除了在追加之前不必包含顶级元素？

Why is appending to a DOM element held in memory faster than appending to a Fragment? Since fragment was created for this sole purpose shouldn't it be faster? Are they're any advantages to using a fragment over an element held in memory other than not having to include a top level element before appending?

检查jsperf的测试输出： http://jsperf.com/javascript-fragments-tests

Check the test output from jsperf: http://jsperf.com/javascript-fragments-tests

推荐答案

从文档片段中插入多个孩子（特别是当你的测试有200个孩子）时，要做的工作要多于它是插入单个父< ul> 标记。

It is a bit more work to insert multiple children from a document fragment (particularly when your test has 200 children) than it is to insert a single parent <ul> tag.

因此，使用片段，您将片段中的200 < li> 元素重新归结为< DOM中的code>< ul> 标记。

So, with the fragment, you're reparenting 200 <li> elements from the fragment to your <ul> tag in the DOM.

使用您的上一个代码块，您只需将其重新插入一个< ul> 标记，方法是将其插入DOM。

With your last code block, you're just reparenting the one <ul> tag by inserting it into the DOM.

因此，在您的特定示例中，使用文档片段为插入DOM创建的工作量超过了运行上一个示例的方式。插入单个< ul> 标记。

So, in your particular example, using the document fragment creates more work for the insertion into the DOM than the way you run your last example that just has to insert the single <ul> tag.

片段当你想要在同一级别跟踪一大堆元素然后用一行代码插入它们并且父级已经在DOM中时，它有其战术优势。但是，它并不总是最快的做事方式，而您可以在实际父节点下的同一级别收集DOM中的所有项目，然后只插入该父节点。

The fragment has its tactical advantages when you want to keep track of a whole bunch of elements at the same level and then insert them with one line of code and you the parent is already in the DOM. But, it isn't always the fastest way to do things vs. a scenario where you can collect all the items out of the DOM at the same level under their actual parent node and then insert just that parent node.

这篇关于为什么比使用javascript片段更快地追加到DOM中尚未包含的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！