通过 JavaScript 加速将 HTML 元素附加到 div 中答案

【问题标题】：Speeding up appending HTML elements into div via JavaScript通过 JavaScript 加速将 HTML 元素附加到 div 中
【发布时间】：2014-02-04 05:26:44
【问题描述】：

我在div 中添加了一些元素作为列表视图。我的项目的所有详细信息都存储在一个数组中。当项目少于 50 个时，追加花费的时间非常少。但是，当项目大小增加到 400 或更多时，需要花费大量时间附加我的清单。

我怎样才能更快地附加 div 或快速附加到我的 div。

结构是这样的。

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

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

</div>

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

【问题讨论】：

如果可能，您应该使用分页概念
我相信这可能与浏览器反复需要对越来越多的元素进行重排有关。我建议您尝试一次添加所有 div 以防止这种情况发生。
您需要向我们展示您的代码，但这归结为与性能相关的错误 - 将 DOM 元素一一添加到实时 dom，使用 jquery 样式 each 在本机循环等
你也可以分享你当前的代码
你可能想看看这个答案：stackoverflow.com/a/17632397/1385627

标签： javascript jquery html css

【解决方案1】：

正如@arete 所提到的，DocumentFragment 将提高将元素附加到 DOM 的性能。

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

DocumentFragment 接口代表一个最小的文档对象没有父母。它被用作Document 的轻量级版本存储格式正确或可能格式不正确的 XML 片段。
- MDN

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

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.

这是在 jsPerf

上使用 DocumentFragments 的 performance test

另外，我的updated the fiddledemo是@Zword提供的，大家不妨考虑一下。

【讨论】：

Hashem +1 以获得很好的答案

【解决方案2】：

试试我做的这个简单的插件。肯定比一个接一个地追加项目或 div 更快：

/*plugin code start*/
(function( $ ) {
$.fn.fastAppend = function(getHTML,limit){
var parent=$(this);
var str = "";
for(i=0;i<limit;i++)
{
    str = str + getHTML + "\n";
}
parent.append(str);
};}( jQuery ));
/*plugin code end*/

/*Call Plugin*/
$('#main').fastAppend('<div class = "item"></div>',400);

See Demo

检查执行时间

案例 1：当 div 一个接一个附加时

Fiddle 1

案例 2：当 div 连接成一个字符串并全部附加时

Fiddle 2

结果： 案例 2 比 案例 1
快

【讨论】：

如果我们使用 Document Fragment 和 JavaScript native .appendChild() 方法会更快：jsfiddle.net/hashem/xUA9L/11
@HashemQolami 是的，您的代码更快一些，但我的代码将解决提问者问题。与您的代码相比，它的行数更少，也很容易理解。您的代码也很好。为什么不您将其发布为答案？
实际上，arete 在他的回答中提到了使用这种方法。但是关于更多的行，对我来说仍然很简单:)
是的，arete 确实发布了一个答案，他提到了相同的方法，但没有发布一个工作示例。您可以在回答中提供一个工作示例，因此您的回答将比所提出的问题更完整。

【解决方案3】：

文档片段将大大提高您遇到的问题的性能。您可以做的是创建一个文档片段，您的所有元素都将附加到该文档片段，然后将文档片段附加到您计划将所有内容附加到的元素。

这样做的方法是创建一个 jquery 对象，如下所示：

var foo = $("<div>");
foo.append($("<div id = "item"></div>"));
foo.append($("<div id = "item"></div>"));
...
foo.append($("<div id = "item"></div>"));
$("body").append(foo);

您也可以使用.html() 来设置元素的内部html。请参阅：John Resig's DOM DocumentFragments article 了解更多信息。

【讨论】：

【解决方案4】：

构建一个包含所有内容的字符串，然后使用container.innerHTML = str 是一种技术含量低且丑陋的方法，但可能更快。

【讨论】：

肯定会更快，因为 DOM 修改只发生一次。

【解决方案5】：

始终为此使用缓存，因为在 DOM 中附加元素会减慢处理速度。更好的是，将标记收集在一个字符串中，然后一次性附加到 DOM 中。例如：

var _sEleList = ""
for (var k=0; k < _nElements; k++) {
    _sEleList += "<div id="+ m_sPrefix+ k + " class='w_cClass'>Content</div>";
};
$('#w_oHolder').append(_sEleList);

【讨论】：