[违规] 向“DOMNodeInserted”事件添加了同步 DOM 突变侦听器。考虑使用 MutationObserver 使页面更具响应性。
还有一个关于这个警告的问题。我已经在那里回答了解决它的方法，这不是这个问题的原因。（对于那些想知道的人：如果向事件处理程序添加 setTimeOut 函数，此警告就会消失，因此它不再是同步的）
真正的问题是：“DOM 突变侦听器”是什么意思？或者什么是“DOM 突变侦听器”？它有什么作用？我问过我的老师，他也不知道。他建议它现在可能已被弃用，但我觉得它出现是有原因的，我想完全理解它，以防我在未来遇到类似的错误但在“DOM 突变侦听器”方面有所不同。
DOM 突变侦听器就像它听起来的那样——它侦听 DOM 的突变。例如，如果您附加这样的侦听器，然后添加或删除节点，则侦听器可能能够检测到它并触发回调。可以观察各种类型的 DOM 突变。
例如一个同步的例子（它很慢，不推荐使用，不推荐）：
container.addEventListener('DOMNodeInserted', () => {
console.log('mutation seen!');
});
container.insertAdjacentHTML('beforeend', 'content');<div id="container"></div>对于此类功能，建议您改用 MutationObserver，这不是同步的 - MutationObserver 回调在突变后的微任务期间运行：
new MutationObserver(() => {
console.log('mutation seen!');
}).observe(container, { childList: true });
container.insertAdjacentHTML('beforeend', 'content');<div id="container"></div>当您需要与无法更改的代码的功能进行交互时，变异观察器通常是正确的选择 - 例如，如果您正在使用更改 DOM 中某些内容的脚本或库，并且您需要能够检测何时发生更改，但您无法修改源脚本，并且该脚本不提供任何外部可见的指示表明发生了此类更改。
除了那种（不寻常的）情况外，通常有更好的方法来对更改做出react，例如在更改 DOM 的函数完成后调用函数。