Lets look at an example of adding a new div element to the Document Object Model (DOM):
The function will add a new div element to the parent element and then change its text. What’s the problem with that? We are doing a trivial thing. The problem is the order of the operations which can trigger two reflows, one for appending the child and the other for changing the text.
Lets change the previous code sample and avoid the problem:
Putting the appendChild function at the end solves the problem and might trigger only one reflow. All the changes to the div are being done in memory and not on a DOM element.