CODEWITHSUNDEEP
javascripthtmlcssdombrowser
Pacerier
Pacerier

Reputation: 89583

do reflows occur once for each applied style?

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)?

Upvotes: 4

Views: 430

Answers (2)

Matt Bradley
Matt Bradley

Reputation: 4495

Yes, there will be two reflows in the first example, and only one in the second. Check out When does reflow happen in a DOM environment?.

Upvotes: 4

Alohci
Alohci

Reputation: 82966

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.

Upvotes: 2

Related Questions