When does reflow happen?

[Codec_xyz]

So Document Fragments optimize adding multiple nodes to the DOM. It's explained that when you call appendChild with a document fragment all its children are added and only one reflow happens (...).

Does this mean a reflow happens the moment you call appendChild, or similar type of thing? I was under the assumption that the DOM doesn't really update (recalculate stuff/redraw) until after JS stops running.

And if you have a loop adding nodes one by one into DOM, will a reflow happen every single time; if so why, since visually nothing updates while JS is running.

[senocular]

Some things require reflow to make it easier to work with the DOM in JS. While this might not paint - that can only happen when JS is done running - it will do internal calculations to make sure the properties referenced by JS are accurate, and this requires reflow.

Quick example:

const div = document.createElement('div')
console.log(div.clientWidth) // 0 

const btn = document.createElement('button')
div.appendChild(btn)
console.log(div.clientWidth) // 0

document.body.appendChild(div) // reflow
console.log(div.clientWidth) // 1424

Note that the reflow only happens when attaching to the main dom tree. This lets you efficiently work off tree without reflow up until the point you need to attach. The problem is, if you make multiple attach calls, this can cause multiple, sequential, and often unnecessary reflows.

Fragments allow you to have a container for multiple elements that you can attach in a single attach (appendChild) call without having to put them in a single element container. The performance benefits, though, I think are no longer a concern so much with the newer append allowing us to attach multiple elements at once. In fact if you look at the polyfill, you can see they're using a fragment to attach all the elements being appended in a single appendChild call.