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.