检测 DOM 加载完成答案

【问题标题】：Detect DOM loading completion检测 DOM 加载完成
【发布时间】：2021-08-05 01:05:58
【问题描述】：

我正在运行基于反应的单页应用程序。有没有办法检测 DOM 何时完成加载？有没有相关事件？我设法找到了 LargestContentfulPaint 但这似乎并没有完成这项工作（或者是它而且我使用它都错了吗？）。我还设法找到了 window.onpaint，但该 API 似乎已被弃用。此外，我还尝试了“DOMContentLoaded”，由于某种原因，它没有产生任何东西......

感谢您的帮助！

【问题讨论】：

如果DOMContentLoaded 没有为您触发，很可能在您运行它的那一刻，dom 已经加载。见document.readyState
请问为什么需要在 React 应用程序中检测到这一点？我想知道是否有更好的方法来实现您想要做的事情。
@StephenJennings 我想用尽可能短的通用等待时间创建视觉回归测试
@SimonCheng 谢谢，我会试试的。你能解释一下为什么一个应该工作而另一个不工作的逻辑吗？

标签： reactjs dom google-chrome-devtools

【解决方案1】：

您可以尝试window.onload，它会等待资源加载后再运行。

【讨论】：

谢谢，但 window.onload 似乎是一个已弃用的事件（MDN 网站）
@BarakBensimhon 我可能会遗漏一些东西，但我没有看到它被弃用了吗？我在原始评论中发送的链接仍然表示完全支持。你能给我一个链接到你看到这个的地方吗？
我可以发誓上周它在 MDN 的文档中显示，并且它已被弃用（现在也找不到它，他们大多数已经更新了他们的文档）。不过，我已经尝试过了，但效果不佳：/ 还是谢谢！

【解决方案2】：

在浏览了许多可能的 API 并进行了尝试之后，我设法找到了用于检测文档中的突变的“MutationObserver.observe()”API（使用 MDN 的文档示例）：

// identify an element to observe
const elementToObserve = document;

// create a new instance of `MutationObserver` named `observer`,
// passing it a callback function
const observer = new MutationObserver(function() {
console.log('callback that runs when observer is triggered');
});

// call `observe()` on that MutationObserver instance,
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {subtree: true, childList: true});

我不确定它是如何工作的，但这个事件似乎很好地跟踪了我的应用程序中的视觉变化。希望它可以帮助除我以外的任何人！

【讨论】：