为什么读取 DOM 测量值会触发布局/回流？

Question

我经常读到在阅读元素的样式后更改样式是一种不好的做法，因为它会触发不必要的回流。 考虑从这个代码在这里：

错误代码：

elementA.className = "a-style";
var heightA = elementA.offsetHeight;  // layout is needed
elementB.className = "b-style";       // invalidates the layout
var heightB = elementB.offsetHeight;  // layout is needed again

好的代码：

elementA.className = "a-style";
elementB.className = "b-style";
var heightA = elementA.offsetHeight;   // layout is needed and calculated
var heightB = elementB.offsetHeight;   // layout is up-to-date (no work)

我很想知道为什么elementA.offsetHeight会导致布局？ 在这里，我们只是读取已经应用的更改，而不是真正应用更改（例如elementA.className = "a-style" ）。

Answer 1

在这里，我们只是阅读已经应用的更改...

并不真地。 分配给className意味着浏览器必须重排，但这并不意味着当您完成分配时它已经重排。 它可能会等待（在现代浏览器中，会等待）直到它的下一次绘制，直到当前的 JavaScript 代码完成（至少）之后才会发生。

但是当您读取像clientHeight这样的计算属性时，浏览器必须暂停 JavaScript 代码并重排页面，以便它可以返回准确的数字。 所以你的“好”代码是这样的：

elementA.className = "a-style";        // marks the layout stale
elementB.className = "b-style";        // marks the layout stale (no change)
var heightA = elementA.offsetHeight;   // triggers reflow
var heightB = elementB.offsetHeight;   // no need for reflow, the layout isn't stale