Question

我将div中的一些元素作为列表视图附加。我的项目的所有细节都存储在一个数组中。当项目少于50时，附加时间非常短。但是当物品尺寸增加到400或更多时，需要花费大量时间附上我的清单。

我怎样才能更快地追加div或飞到我的div。

结构是这样的。

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

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

</div>

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

Answer 1

尝试我制作的这个简单的插件。肯定会比逐个附加项目或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
更快

Answer 2

正如@arete所提到的，DocumentFragment会提高将元素附加到DOM中的效果。

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

DocumentFragment接口表示最小的文档对象没有父母。它被用作Document的轻量级版本存储格式良好或可能非格式良好的XML片段 - MDN

我们可以使用document.createDocumentFragment()方法创建一个空的 DocumentFragment ，并使用.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

以下是在 jsPerf上使用 DocumentFragments 的 performance test

另外，我可能需要考虑由updated the fiddle提供的 @Zword 演示。

Answer 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。

Answer 4

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

Answer 5

始终使用缓存，因为在 DOM 中追加元素会减慢进程。更好的是，在字符串中收集标记，然后立即将所有内容附加到DOM中。 E.g：

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

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

5 个答案:

See Demo

Fiddle 1

Fiddle 2