前端 - 执行appendChild或removeChild时，会重新计算布局吗？什么时候重新计算布局？

Question

执行appendChild或removeChild时，会重新计算布局吗？什么时候重新计算布局？

猜测：

• 在事件循环中，有一阶段是留给渲染的，是否是在这时重新计算布局？appandChild或removeChild只是改变了dom。
• 在渲染阶段根据改变的这个dom来重新计算布局。
• 如果我添加了一个元素紧接着又删除了，渲染阶段是根本不知道的。即使这个元素上有动画也是不会出现的。

可以试一下这个例子codesandbox

其实应该是会重新计算布局的，可以检测一下添加该元素之前和之后其父元素的大小(offsetHeight ...)，它的大小是会发生变化的。

添加类名(classList.add)，也会触发重新布局(检测一下添加类名之后，大小或其他样式是否发生变化就可以验证了)。

有一个动画制作的方法flip，就用到了这个同步布局。

Answer 1

为什么要猜呢？直接性能面板看下有没有触发布局就可以了，下面这个我是在append之后打印了document.body.offsetHeight的执行栈，这里为什么会触发布局正是因为你获取了offsetHeight，你试想下如果浏览器不强制重新布局重绘一次你的程序怎么能获取到正确的值？所以你不能用这样来检测。如果你不做操作append之后立即remove你会发现执行栈里就没有布局这一任务

Answer 2

执行 appendChild 或 removeChild 时，确实会触发重新计算布局（Recalculation of layout）。

DOM（文档对象模型）是一个编程接口，用于表示和交互网页内容。当您对 DOM 进行更改，如添加或删除元素时，浏览器需要重新计算元素的位置和大小，以确保页面的渲染是正确的。这个过程称为重新计算布局。

在执行 appendChild 或 removeChild 时，浏览器会立即触发重新计算布局。这是因为这些操作直接影响了 DOM 的结构，从而影响了元素的布局。

至于您提到的例子，如果在短时间内连续执行添加和删除操作，浏览器的重新计算布局机制只会对最后一次更改进行响应，之前的更改不会触发重新计算布局。这是因为浏览器会尽量减少不必要的重新计算布局以提高性能。

在事件循环中，确实有一阶段是留给渲染的。当 DOM 更改时，浏览器会将这些更改放入一个队列中，然后在适当的时候进行渲染。这就是为什么在某些情况下，即使立即执行了 DOM 更改，用户也看不到立即的效果。这是因为更改首先被放入队列中，然后在渲染阶段进行处理。

希望这个答案能帮助您更好地理解 DOM 和重新计算布局的过程！