问题
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)?
回答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.
回答2:
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?.
来源：https://stackoverflow.com/questions/6893032/do-reflows-occur-once-for-each-applied-style