Javascript - DOM 重绘方法是否同步？

Question

在我的问题中，DOM 重绘方法是那些修改 DOM 并导致浏览器重绘页面的方法。例如：

const newChildNode = /*...*/;

document.body.appendChild(newChildNode);

const newHeight = document.body.scrollHeight;

这段代码在正常情况下工作正常，但我不太确定它在高压条件下的表现如何，比如当有这么多重绘页面的请求时。我可以假设当document.body.scrollHeight 被执行时，newChildNode 已经在屏幕上可见了吗？

Answer 1

我们可以将这个“重绘”过程分为3部分，DOM更新，重排，重绘。

所有这些操作都不遵循相同的规则：

DOM 更新：始终同步。 DOM只是另一个js对象，它的操作方法都是同步的。

Reflow：这就是你偶然发现的奇怪野兽。这是页面上元素所有框位置的重新计算。
通常，浏览器会等到您完成所有 DOM 修改，即 js 流结束后，才会触发它。
但是一些 DOM 方法会强制这个操作，同步。例如，所有HTMLElement.offsetXXX 和类似属性，或Element.getBoundingClientRect，或访问文档内的Node.innerText 或访问getComputedStyle 返回对象（可能还有其他对象）的某些属性将触发同步 回流，以获得更新的值。所以当你使用这些方法/属性时要小心。

重绘：当事物实际传递给渲染引擎时。规范中没有说明何时应该发生这种情况。大多数浏览器会等待下一次屏幕刷新，但并不是说它会一直这样。例如众所周知，Chrome 在您使用 alert() 阻止脚本执行时不会触发它，而 Firefox 会。