do reflows occur once for each applied style?

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

score 4 · Answer 1 · edited May 23 '17 at 11:55

4

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

edited May 23 '17 at 11:55

Community

1
1

answered Jul 31 '11 at 23:57

Matt Bradley

4,395
1
20
13

btw do you have any idea how we can inspect how many reflows are done in the browser? – Pacerier Aug 01 '11 at 01:46

score 2 · Accepted Answer · answered Jul 31 '11 at 23:57

2

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.

answered Jul 31 '11 at 23:57

Alohci

78,296
16
112
156

but it is not possible for any browser to apply reflow only when a piece of JavaScript reads back a property that depends on it's layout.. because if that is true, the user would not see the width as 100px until i read the property that depends on the width (and cause a reflow). in other words if i never did read the property, the user would not see the width as "registered" – Pacerier Aug 01 '11 at 00:00
@Pacerier - whenever the screen is updated for the user, then. of course, a reflow will take place if necessary, but the screen will not be updated for every line of JavaScript. But you should look at the the question linked to by Matt. The answers there are much better than mine. – Alohci Aug 01 '11 at 00:07
@Alohci +1 I think the best line in the answer is "the details will be implementation dependant". It definately changes from browser to browser. For instance in chrome it seems to try and delay reflows as long as possible. IE (at least the eariler ones) seem to reflow more often in my experience. – James Khoury Aug 01 '11 at 00:27
@Alohci thanks for the help. btw i've updated the question take a look at it =D – Pacerier Aug 01 '11 at 01:48

do reflows occur once for each applied style?

2 Answers2

Linked