Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) AJAX and APIs Displaying the Photos

Brendan Moran
Brendan Moran
14,052 Points

DOM Reflow

Dave McFarland, I would really like to hear from the man himself on this one.

I can see why you do things the HTML-string-building way, but I had a question about the performance of vanilla javaScript and jQuery DOM manipulation methods.

TL; DR before we start: Does the statement "var newElement = document.createElement();" cause reflow? Not when "someElement" is appended to the document somewhere, but when it is simply created and later modified before appending?

Let's start with Vanilla.

If I create a variable right before my for loop,

var photosUL = document.createElement("ul");

Then within my for loop:

  1. create (using the same method) <li>, <a>, and <img> elements,
  2. use vanilla JS methods to modify those elements as needed (add attribute, add class)
  3. append those elements to photosUL

And finally, after the for loop, the last step: Append the photosUL to the #photos div using vanilla JS append or inner HTML method.

Will this, at any point before the last step, cause a DOM reflow? Does the document.createElement cause a reflow because it is operating on the document? Or does it not cause a reflow, because no actual appending is going on, just an element being created?

I am sure, based on what I've read, that the last step will cause a reflow, but I am not sure about the steps before. The elements that I create and modify are in the document object even though they aren't yet appended and showing anywhere on the page. Thus, my confusion about when a DOM reflow really happens.

And for jQuery: same concept, except this time creating a disembodied jQuery objects, like $("<ul></ul>"), instead of document.createElement, and using jQuery methods to manipulate and append instead of vanilla. Would that cause less reflow than the vanilla way? (If document.createElement() and modifications to disembodied elements created this way do cause reflow, then I am guess that jQuery will be more performance friendly!)

I know both ways result in a more complex code, but I was curious about the performance implications of creating disembodied elements, both in vanilla JS and jQuery, and exactly where DOM reflow occurs. A few Google searches didn't yield any direct answers to this specific question, so I figured it best to ask here.

1 Answer

Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Brendan Moran

Just creating an element with document.createElement( ) does not cause a reflow. Only when adding the element -- appendChild( ) for example -- causes a reflow. The recommended practice is to build all of your elements THEN append them in one step (if possible). This is the best from a performance perspective. It's the same (as far as I know) with jQuery's methods.

Brendan Moran
Brendan Moran
14,052 Points

Thanks so much for clarifying that. The reflows are caused only by changes to what is seen in on the page. Got it!