When i do this in javascript:
当我用javascript做这个的时候:
element.style.width="100px";
element.style.height="100px";
Am i right to say that there are 2 reflows in the document?
我说文件中有2个回流是正确的吗?
And if i do this:
如果我这样做:
element.setAttribute("style","width:100px;height:100px;") there is only 1 reflow?
setattribute ("style"，"width:100px;height:100px;")只有1个回流?
(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)?
附带问题:我们是否可以停止猜测并检查浏览器(Chrome / FF /等等)到底发生了多少回流?
2 个解决方案
#1
2
When i do this in javascript:
当我用javascript做这个的时候:
element.style.width="100px";
element.style.height="100px";element.style.width = " 100 px”;element.style.height = " 100 px”;
Am i right to say that there are 2 reflows in the document?
我说文件中有2个回流是正确的吗?
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.
最不可能的。Reflows(相对而言)需要花费很多时间，因此只在需要的时候才会发生，例如，当一块JavaScript读取依赖于它的布局的属性时(比如offsetWidth)。
But the details will be implementation dependent.
但具体细节将取决于实施情况。
#2
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?.
是的，第一个例子中有两个回流，第二个例子中只有一个。查看在DOM环境中何时发生回流?
#1
2
When i do this in javascript:
当我用javascript做这个的时候:
element.style.width="100px";
element.style.height="100px";element.style.width = " 100 px”;element.style.height = " 100 px”;
Am i right to say that there are 2 reflows in the document?
我说文件中有2个回流是正确的吗?
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.
最不可能的。Reflows(相对而言)需要花费很多时间，因此只在需要的时候才会发生，例如，当一块JavaScript读取依赖于它的布局的属性时(比如offsetWidth)。
But the details will be implementation dependent.
但具体细节将取决于实施情况。
#2
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?.
是的，第一个例子中有两个回流，第二个例子中只有一个。查看在DOM环境中何时发生回流?