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

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测试用例

Answer 2

1. 不,如果你使用$.each()那么jQuery将不会使用DocumentFragment- jQuery无法知道你将在循环内做什么,每次迭代都是独立的.

2. 文档片段的要点是,您不必像在第二个示例中那样将所有新元素包装在包装元素中 - 片段可以包含多个元素,所有元素都将插入到所需的位置.如果您的元素需要一个共同的父元素,那么您不需要文档片段.

3. 如果你直接传递一个元素数组而不是自己迭代它们,jQuery 显然会使用一个文档片段.append().