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

Does jQuery use create document fragment inside each loops?

本文关键字：创建 文档 片段 循环 是否 jQuery      更新时间：2023-09-26

所以我读到jQuery在内部使用文档片段来加快渲染速度。 但我想知道是否有人知道 jQuery 是否会在我使用 each 循环将 img 元素附加到 DOM 的情况下使用 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 元素。

谢谢你的任何建议。

为什么要循环添加元素？ 

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

好的，所以它是元素。

最快的方法是将 append 与数组本身一起使用。 

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

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

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

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

jsPerf 测试用例

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

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

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

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

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