Avoiding HTML document reflows

Answer 1

Reflow is queued whenever the DOM changes but only executed when either:

1. There is no more javascript to process (end of script) or

2. When you query for a calculated value that must be rendered such as clientHeight.

So, to avoid reflows, you must follow the following rules

• Don't query the DOM while you're changing it and

• Don't change the DOM when you want to query it

In practice this means that you should group all your query operations at the end of the script after you've done with modifying the DOM. Doing this will only reflow once for the thousands of elements instead of thousands of times for each element.