如何等待 DOM 更改呈現？ （MutationObserver 不起作用）

Question

我有一棵 DOM 節點樹，並刪除了一些子節點。 我想確定 DOM 樹的更新大小。

MutationObserver 不起作用，因為它會通知 DOM 模型更改，但渲染尚未實際完成，因此大小尚未更新。

有很多方法可以做到這一點（setTimeout(delay) 或多個嵌套的 requestAnimationFrame()），但我不想在以后遇到意外的大小問題。

有沒有什么非hacky的方法來做到這一點？

Answer 1

盒子布局的更新，又名“回流”可以同步觸發，不需要“完整渲染”。 您可以查看此答案以獲取有關渲染操作同步性的更多詳細信息。

因此，在您的情況下，您可以在完成 DOM 更新后立即直接獲取元素的新大小，因為獲取此大小本身會觸發回流； 甚至不需要使用 MutationObserver。

 const elem = document.getElementById('elem'); console.log('initial', elem.offsetHeight); elem.querySelectorAll('p:not(.notme)').forEach(el=>el.remove()); // getting '.offsetHeight' triggers a reflow console.log('after removing', elem.offsetHeight);

 <div id="elem"> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p class="notme">Hello</p> </div>

雖然要注意，觸發重排在性能方面有一些成本，所以如果你擔心其他事情也可能會在之后修改 DOM，你可能需要等待繪制事件循環迭代，在調用其中一個方法之前使用requestAnimationFrame觸發它。

 const elem = document.getElementById('elem'); console.log('initial', elem.offsetHeight); elem.querySelectorAll('p:not(.notme)').forEach(el=>el.remove()); // wait the painting frame in case other operations also modify the DOM requestAnimationFrame(()=> { console.log('after removing', elem.offsetHeight); });

 <div id="elem"> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p>Hello</p> <p class="notme">Hello</p> </div>

---

Ps：對於那些仍然對這個 XY 問題的 Y 感興趣的人，你可以看看這個 Q/A ，它演示了即將到來的requestPostAnimationFrame的使用，並為它提供了一個猴子補丁。