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 = $('

'); $.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.

Accepted Answer

Why all the looping to add elements? ``` $('#imgSection').append("

" + displayArray .join("") + "

"); ``` 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 = $("

").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

Does jQuery use create document fragment inside each loops?

Solution

Problem