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()Firefox 阻止脚本执行时,Chrome就会因为没有触发它而闻名.