javascript - 对 DOM : Mutation Observers, window.addEventListener ("onresize"中的变化使用react，回调)或 CSS 替代方案？

Question

我正在尝试找出对 DOM 中的变化使用react的最佳方式。

我读过类似的帖子，例如 one还有这个one并且它们都没有明确说明何时使用 Mutation Observers 以及何时使用 window.addEventListener("onresize", callback)。 Mutation Observers 是否比 window.addEventListener("onresize", callback) 更有效 even if the resize event is throttled ？

我将其包含在 CSS3 标签下，因为它看起来像是在 2012 年，some neat CSS tricks that triggered custom resize events我想知道从那时起是否有任何创新。

Answer 1

这两个是解决不同问题的不同工具。变异观察者用于对 DOM 中的变化使用react。假设您想编写一个 javascript 函数，将整个页面上的一个词替换为另一个词，而最终用户不会注意到任何事情。您可以在此处使用 setInterval，但存在从服务器(或异步 AJAX 调用)加载内容时“闪烁”内容的风险，除非您将间隔设置为非常小的值，在这种情况下，它会成为一个非常耗费资源的解决方案。

因此，您可以编写一个突变观察器，每次 DOM 发生变化时都会调用它，其中包括页面呈现或 javascript 在线添加/删除/修改 HTML 元素。我曾经编写的一个客户端 A/B 测试工具使用它们来捕获 DOM 中的变化并以最快的方式处理它们。

将监听器添加到 onresize 事件就是这样做的 - 它会在浏览器窗口调整大小时被调用，而不管此时的 DOM 状态如何。所以这两个不能真正互换。在较重的页面上，突变观察器在资源方面可能会变得相当“昂贵”，因此您可能必须在那里实现节流。您需要什么取决于您正在处理的具体情况，无法肯定地回答。