javascript - 通过 JavaScript 加速将 HTML 元素附加到 div 中

Question

我在我的 div 中附加了一些元素作为 ListView 。 我的元素的所有详细信息都存储在一个数组中。 当元素少于 50 个时，追加花费的时间非常少。 然而，当元素大小增加到 400 或更多时，它花费了很多时间 附加我的列表。

我如何可以更快地或动态地将 div 附加到我的 div。

结构是这样的。

<div id="main">
<div id="item"></div>
.....
.
.

.
.
<div id="item"></div>

</div>

这个主 div 在我的应用程序中是一个不同的屏幕。

Answer 1

作为@arete已经提到，DocumentFragment将提高将元素附加到 DOM 中的性能。

使用 DocumentFragments 比重复的单个 DOM 节点注入(inject)更快，并且允许您对新元素执行 DOM 节点操作，而不是通过 innerHTML 进行大量注入(inject)。

The DocumentFragment interface represents a minimal document object that has no parent. It is used as a light-weight version of Document to store well-formed or potentially non-well-formed fragments of XML.
- MDN

我们可以创建一个空的 DocumentFragment，使用 document.createDocumentFragment()方法，并通过 .appendChild() 追加创建的子级JavaScript原生方法，如下:

var frag = document.createDocumentFragment(),
    limit = 400,
    element = 'div',
    clsName = 'item';

for (var i=0; i<limit; i++) {
    var box = document.createElement(element);
    box.className = clsName;
    // Append the child into the Fragment
    frag.appendChild(box);
}

// Finally, append the fragment into the real DOM (touch the DOM just once)
document.getElementById('main').appendChild(frag.cloneNode(true));

WORKING DEMO .

这是一个 performance test 在 jsPerf

上使用 DocumentFragments

此外，我 updated the fiddle demo，由@Zword提供，您可能需要考虑。