Question

所以我读过jQuery在内部使用文档片段来提高渲染速度。但我想知道是否有人知道jQuery是否会在这种情况下使用createDocumentFragment，我将使用每个循环将img元素附加到DOM？

var displayArray = []; // Lots of img elements

$.each(displayArray, function()
{
    $('#imgSection').append(this);
});

或者我是否需要使用此代码才能减少浏览器重排次数？

var displayArray = []; // Lots of img elements
var imgHolder = $('<div/>');

$.each(displayArray, function()
{
    imgHolder.append(this);
});

$('#imgSection').append(imgHolder);

此外，displayArray由其他代码填充，此处未显示，根据JSON文件中的路径创建img元素。

感谢您的任何建议。

Answer 1

<击> 为什么所有循环都要添加元素？

$('#imgSection').append("<div>" + displayArray .join("") + "</div>");

<击>

好的，这是元素。

最快的方法是使用追加数组本身。

$("#out").append(elems);

使用一个div来追加的其他选项是

var div = $("<div/>").append(elems); $("#out").append(div);

但是，除非预先加载，否则一次附加大量图像会很糟糕。这将是一堆排队的http请求。

jsPerf test cases

Answer 2

不，如果你使用$.each()，那么jQuery不会使用DocumentFragment - jQuery无法知道你在循环中要做什么每次迭代都是独立的。
文档片段的重点在于，不要必须将所有新元素包装在包装元素中，如您在第二个示例中所做的那样 - 片段可以包含多个元素，所有元素都将插入到所需的点。如果您的元素需要一个共同的父母，那么您就不需要文档片段。
如果您将元素数组直接传递给.append()而不是自己迭代它们，jQuery apparently will会使用文档片段。

Answer 3

如果你真的关心回流（并注意到显示速度很慢），你可以隐藏并显示图像保持元素：

var displayArray = […]; // Lots of img elements
var holder = $('#imgSection').hide();
for (var i=0; i<displayArray.length; i++)
    holder.append(displayArray[i]);
holder.show();

jQuery是否在每个循环中使用创建文档片段？

3 个答案: