Question

When i do this in javascript:

element.style.width="100px";
element.style.height="100px";

Am i right to say that there are 2 reflows in the document?

And if i do this:

element.setAttribute("style","width:100px;height:100px;") there is only 1 reflow?

(I am aware that the latter will simply override all other previously set styles)

Side question: is there any way we can stop the guessing and inspect exactly how many reflows is happening in the browser (Chrome / FF / etc)?

Answer 1

When i do this in javascript:

element.style.width=”100px”;

element.style.height=”100px”;

Am i right to say that there are 2 reflows in the document?

Most unlikely. Reflows take (comparatively) a lot of time so they tend to only happen during JavaScript execution when they need to, for example when a piece of JavaScript reads back a property that depends on it’s layout, e.g. offsetWidth.

But the details will be implementation dependent.