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.

[This](https://developers.google.com/speed/articles/javascript-dom) may be helpful. — jeremy, Mar 31 '13 at 18:36
@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) ? — Denys Séguret, Mar 31 '13 at 18:40
@dystroy nice guess. Can you prove it's not required by the spec? — John Dvorak, Mar 31 '13 at 18:40

score 7 · Accepted Answer · edited May 23 '17 at 12:26

7

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.

enter image description here

edited May 23 '17 at 12:26

Community

1
1

answered Mar 31 '13 at 18:41

plalx

42,889
6
74
90

Do you have a source for the *"cause a single reflow"* ? – Denys Séguret Mar 31 '13 at 18:43
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) – Benjamin Gruenbaum Mar 31 '13 at 18:46
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. – plalx Mar 31 '13 at 18:51
Very nice empirical process! Can you confirm this is also the behavior in other browsers? – Benjamin Gruenbaum Mar 31 '13 at 19:40
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. – plalx Mar 31 '13 at 19:49
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). – Benjamin Gruenbaum Mar 31 '13 at 20:18

How many Reflows does attaching a DocumentFragment Cause?

Update:

1 Answers1