每种应用的样式都会发生一次回流吗？答案

【问题标题】：do reflows occur once for each applied style?每种应用的样式都会发生一次回流吗？
【发布时间】：2011-10-17 02:34:31
【问题描述】：

当我在 javascript 中执行此操作时：

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

我说文档中有 2 次重排对吗？

如果我这样做：

element.setAttribute("style","width:100px;height:100px;")只有1次回流？

（我知道后者将简单地覆盖所有其他先前设置的样式）

附带问题：有什么方法可以停止猜测并准确检查浏览器（Chrome / FF / 等）中发生了多少回流？

【问题讨论】：

【解决方案1】：

是的，第一个例子会有两次回流，而第二个例子只有一次。查看When does reflow happen in a DOM environment?。

【讨论】：

【解决方案2】：

当我在 javascript 中执行此操作时：

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

我说文档中有 2 次重排对吗？

不太可能。重排（相对而言）花费大量时间，因此它们往往只在需要时发生在 JavaScript 执行期间，例如，当一段 JavaScript 读回依赖于其布局的属性时，例如偏移宽度。

但细节将取决于实现。

【讨论】：

但是只有当一段 JavaScript 读回一个依赖于它的布局的属性时，任何浏览器都不可能应用重排。因为如果这是真的，用户不会看到宽度为100px 直到我读取取决于宽度的属性（并导致回流）。换句话说，如果我从未读过该属性，则用户不会将宽度视为“已注册”
@Pacerier - 每当为用户更新屏幕时。当然，必要时会进行重排，但不会为每一行 JavaScript 更新屏幕。但你应该看看马特链接的问题。那里的答案比我的要好得多。
@Alohci +1 我认为答案中最好的一行是“细节将取决于实现”。它肯定会从浏览器更改为浏览器。例如，在 chrome 中，它似乎试图尽可能长时间地延迟回流。根据我的经验，IE（至少是早期的）似乎更频繁地重排。
@Alohci 感谢您的帮助。顺便说一句，我已经更新了问题，看看它=D