jQuery是否在每个循环内使用创建文档片段? [英] Does jQuery use create document fragment inside each loops?

问题描述

因此，我读到jQuery在内部使用文档片段来加快渲染速度.但是我想知道是否有人知道在这种情况下，我会使用each循环将img元素附加到DOM上时jQuery是否会使用createDocumentFragment吗?

So I've read that jQuery uses document fragments internally to make rendering faster. But I am wondering if anyone knows if jQuery would use createDocumentFragment in this situation where I'm appending img elements to the DOM using the each loop?

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

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

还是我需要使用此代码来减少浏览器重排的次数?

Or would I need to use this code in order to reduce the number of browser reflows?

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

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

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

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

Also, the displayArray is populated by other code, not shown here, that creates img elements based off of paths in a JSON file.

谢谢您的任何建议.

推荐答案

为什么所有循环都要添加元素?

Why all the looping to add elements?

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

好吧，这就是元素.

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

The quickest way is going to be using append with the array itself.

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

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

other option using one div to append is

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

但是一次添加很多图像是不好的，除非它们被预先加载.那将是一堆正在排队的http请求.

BUT appending a lot of images at once is going to be bad unless they are preloaded. That will be a bunch of http requests being queued up.

jsPerf测试用例

这篇关于jQuery是否在每个循环内使用创建文档片段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！