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.

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.

• javascript
• jquery
• documentfragment

• 1 .append will directly add the element to the other element. I don't see how a document fragment could even work here. – Felix Kling Commented Jan 30, 2013 at 23:02
• @FelixKling The idea here is to reduce the number of times the browser has to reflow the screen. I was just wondering if jQuery does that internally or not. – Matt Whitehead Commented Jan 30, 2013 at 23:11
• Yes, I understand that, but in this case you are iterating over an array of DOM elements lets say and in each iteration your are adding an element to an existing element in the tree. There cannot be a middle step where jQuery is using a document fragment. You have to take of avoiding reflows yourself. – Felix Kling Commented Jan 30, 2013 at 23:15
• @FelixKling Ahh... that makes more sense now. Thank you. – Matt Whitehead Commented Jan 30, 2013 at 23:21
• 1 If you have "lots of img elements", the browser will rather be troubled with image loading than with reflowing. – Bergi Commented Jan 30, 2013 at 23:24

3 Answers 3

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

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.

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