Does jQuery use create document fragment inside each loops?

Question

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);

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

Thank you for any advice.

Answer 1

Why all the looping to add elements?

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

Okay so it is elements.

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

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

other option using one div to append is

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

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 test cases

Answer 2

1. No, if you use $.each() then jQuery won't use a DocumentFragment - jQuery has no way of knowing what you're going to do inside the loop and each iteration is independent.

2. The point of the document fragment is that you don't have to wrap all your new elements up in a wrapper element as you've done in your second example to limit the reflows.

3. jQuery apparently will use a document fragment if you pass an array of elements directly to .append() instead of iterating over them yourself.

Answer 3

If you really care about reflows (and have noticed the displaying to be slow), you can hide and show the image-holding element:

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