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对象，它的操作方法都是同步的。

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

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