How many Reflows does attaching a DocumentFragment Cause?

Question

Using DocumentFramgment allows us to attach DOM elements to each other without causing a browser reflow (i.e. work with offline DOM trees). A lot of libraries like jQuery use document fragments to improve performance.

The document fragment can have a complicated structure. For example, let's say it represents something like:

<div>
   <span>
       <a href='asd'>asd</a>
   </span>
   <span>
       <a href='asd2'>asd2</a>
   </span>
   <div>
       <div>
          Hello World
       </div>
   </div>
</div>

or a document fragment that contains multiple children:

<h2>Title 1</h2>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<h2>Title 2</h2>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>

Often, when we finish building the the fragment, we attach it to the main DOM tree.

How many reflows happen when we do this? Does it depend on the number of direct children of the document fragment?

Update:

I got a response from Addy Osmani who is on the Chrome team at Google:

Just one DOM reflow. PS: we're moving more towards referring to reflow as layout as it's basically an event triggering layout/repaint in the page.

Consolata

I bet the answer to the first question is "one" – Sparrow

This may be helpful. – Keown

@JanDvorak I guess that all browsers will do only one reflow but isn't this the responsibility of the implementation (i.e. unverifiable in the general case) ? – Intensifier

@dystroy nice guess. Can you prove it's not required by the spec? – Sparrow

Answer 1

A single DOM reflow process occurs each time an action causing one is invoked. We can read in this article that:

This pattern lets us create multiple elements and insert them into the DOM triggering a single reflow. It uses something called a DocumentFragment. We create a DocumentFragment outside of the DOM (so it is out-of-the-flow). We then create and add multiple elements to this. Finally, we move all elements in the DocumentFragment to the DOM but trigger a single reflow.

There are various actions that can cause a DOM reflow, including appending a new element to the document. The purpose of using a DocumentFragment is to be able to append content to the DOM in a single operation causing a single reflow process.

According to this article, we can read that:

Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it.

However, all these reflow operations will occur in a single reflow process.

I created a fiddle to demonstrate this. Using chrome's timeline, we can clearly see that rendering occurs in a single block.

Ostend

Do you have a source for the "cause a single reflow" ? – Intensifier

Thanks for your time and answer. It is however, more of an educated guess than an answer. " I think that the reflow process could be more or less expensive depending on the content being added." If your claim is that more than one re-flow is being performed, can you show it? (from the spec, with a fiddle or anything similar) – Consolata

Well, it's stated in the article I joined to the answer that reflowing a single element could potentially reflow its parent elements and also any elements following it. However, that would all be done in a single reflow process. – Ostend

Very nice empirical process! Can you confirm this is also the behavior in other browsers? – Consolata

I cannot confirm it, but if you think about it, since the browser does that in a single thread, the only way there could be multiple reflow processes for a single operation is if they would allow the reflow to run in multiple batches using a similar approach to setTimemout, letting some client-side code to be executed between batches. However, what if the other code that executes modifies the DOM again? In that case everything would have to be recalculated again, so I am pretty sure a reflow always occurs as an atomic operation. – Ostend

The chromium branch of the WebKit engine actually does use multiple threads for rendering the dDOM (if I recall correctly). Other engines might use different threads anyway, (one for JavaScript and one for the page). – Consolata