执行appendChild或removeChild时,会重新计算布局吗?什么时候重新计算布局?-灵析社区

销售经理537

执行appendChild或removeChild时,会重新计算布局吗?什么时候重新计算布局? 猜测: * 在事件循环中,有一阶段是留给渲染的,是否是在这时重新计算布局?appandChild或removeChild只是改变了dom。 * 在渲染阶段根据改变的这个dom来重新计算布局。 * 如果我添加了一个元素紧接着又删除了,渲染阶段是根本不知道的。即使这个元素上有动画也是不会出现的。 可以试一下这个例子[codesandbox](https://link.segmentfault.com/?enc=dD6Mi5ysGNPbxw6XaANogA%3D%3D.BBdDvaVzG%2BUUKHNpqEcc8WifPUWgW3dTF8wx6WU7NOCj1ffML7yEu0PGz%2BNE%2FyZpgqTkaPJjFliBBrAbmPYa0Nfc0AXwkNmpbg403ZzLQLw%3D) 其实应该是会重新计算布局的,可以检测一下添加该元素之前和之后其父元素的大小(`offsetHeight ...`),它的大小是会发生变化的。 添加类名(`classList.add`),也会触发重新布局(检测一下添加类名之后,大小或其他样式是否发生变化就可以验证了)。 有一个动画制作的方法flip,就用到了这个同步布局。

阅读量:16

点赞量:0

问AI
为什么要猜呢?直接性能面板看下有没有触发布局就可以了,下面这个我是在"append"之后打印了"document.body.offsetHeight"的执行栈,这里为什么会触发布局正是因为你获取了"offsetHeight",你试想下如果浏览器不强制重新布局重绘一次你的程序怎么能获取到正确的值?所以你不能用这样来检测。如果你不做操作"append"之后立即"remove"你会发现执行栈里就没有布局这一任务 "截屏2023-12-23 18.08.42.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241026/33022eebe0e9186db8a34039f3fc364b.png)