Javascript 如何等待DOM更改进行渲染？（MutationObserver不工作）

我有一个DOM节点树，并删除了几个子节点。 我想确定DOM树的更新大小

MutationObserver无法工作，因为它会通知DOM模型的更改，但渲染尚未实际完成，因此大小尚未更新

有很多方法可以做到这一点（setTimeout（delay），或者多个嵌套的requestAnimationFrame（）），但我不想在以后遇到意外的大小调整问题

---

有没有什么非黑客方式可以做到这一点？

盒布局的更新，即“回流”可以，并且不需要“完全渲染”。 有关渲染操作的同步性的详细信息，请参见

因此，在您的情况下，您可以在DOM更新之后直接获取元素的新大小，因为这种大小获取本身将触发回流；甚至不需要使用变种观察者

const elem=document.getElementById（'elem'）；
控制台日志（'首字母'，要素离视）；
elem.querySelectorAll（'p:not（.notme'））.forEach（el=>el.remove（））；
//获取“.offsetHeight”会触发回流
console.log（'移除后'，元素偏视）

你好

你好

你好

你好

你好

你好
非常确定
requestAnimationFrame
后接
setTimeout
是实现这一点的方法，尽管我也希望有更好的方法，但并非所有浏览器都支持。有趣的信息。移除DOM元素后在链式
then（）
块中调用的回流触发方法（offsetHeight、computedStyle、boundingClientRect）都没有更新的值。似乎只有2+rAF（）调用或setTimeout（7ms）返回正确的值。根据您在回答中提到的三部分重画过程，该值似乎在第二部分回流后更新。一些CSS规则可能会在之后更改它，例如选择器
。class:first
？请发布一篇关于您拥有的内容的文章。这些getter和方法将始终具有更新的值，因此在获得这些值后，您的设置中一定会有某些内容更改元素的高度。