Javascript - DOM重绘方法是同步的吗？

Question

Javascript - DOM重绘方法是同步的吗？

3

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

const newChildNode = /*...*/;

document.body.appendChild(newChildNode);

const newHeight = document.body.scrollHeight;

这段代码在正常情况下工作良好，但我不确定它在高压力条件下的行为如何，比如当有很多请求重新绘制页面时。我能否假设在执行document.body.scrollHeight时，newChildNode已经在屏幕上可见？

- kkkkkkk

2

是的，它们是同步的。 - Hemant Rajpoot

“...在屏幕上已经可见了吗？” - 直到所有JS执行完毕后，屏幕才会被重新绘制，但是DOM会同步更新。 - nnnnnn

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kaiido · Accepted Answer

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

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

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

回流：这是一个奇怪的东西。它是重新计算页面上所有元素框的位置。
通常，浏览器会等待您完成所有DOM修改，也就是JavaScript代码流结束之后再触发此过程。
但某些DOM方法会强制执行此操作，同步地进行。例如，所有HTMLElement.offsetXXX及类似属性或Element.getBoundingClientRect，或访问文档内的Node.innerText或访问getComputedStyle返回对象的某些属性（以及可能的其他属性）将触发同步的回流，以获取更新后的值。因此，在使用这些方法/属性时要小心。

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