DOM elements are added or removed. Note that these elements must be visible.

Elements change position or change size(because of a change in margin, padding, border thickness, width, height, etc.) or content is changed.

Page renders initially and window is resized.

Every time a page geometry is changed the reflow is calculated for all the elements that are affected and then the browser repaints.

In modern browser to increase the performance, these changes are done in batches which reduces the number of reflows and also the number of repaints.

But with ignorance you will kill the capabilities of these browser to work efficiently.

There are conditions when this capability is overridden and reflow is calculated. When does this happens and when does the render tree changes need to be flushed.

Render tree queue is flushed whenever any of these is calculated.

Offsets

heights and widths

Position.

getcomputedStyle()

Why this happens?

It happens because the information that need to be processed from these properties have to be precise and thus all the calculation must be done before that particular stage. This is the reason why everything in the render queue is flushed and reflow is calculated.

From the above discussion you may have inferred that we have to minimize the reflows and repaints thus we must use some techniques to do this. What could be those techniques?

One would be the same what browser does always make changes in render tree in batches. Now you must be wondering how to do that? Look at the codes below.