7

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

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 元素。

谢谢你的任何建议。

4

3 回答 3

8

为什么要循环添加元素？

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

好的，它是元素。

最快的方法是对数组本身使用 append。

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

使用一个 div 追加的另一个选项是

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

但是一次添加很多图像会很糟糕，除非它们被预加载。那将是一堆正在排队的http请求。

jsPerf 测试用例

于 2013-01-30T23:02:08.893 回答
8

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

  2. 文档片段的要点是，您不必像在第二个示例中所做的那样将所有新元素包装在一个包装器元素中以限制重排。

  3. 如果您将元素数组直接传递给而不是自己迭代它们，jQuery显然会使用文档片段。.append()

于 2013-01-30T23:23:57.813 回答
0

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

var displayArray = […]; // Lots of img elements
var holder = $('#imgSection').hide();
for (var i=0; i<displayArray.length; i++)
    holder.append(displayArray[i]);
holder.show();
于 2013-01-30T23:36:45.577 回答