DOMNodeInserted 或 hashchange

Posted 2023-04-13

【中文标题】DOMNodeInserted 或 hashchange

【英文标题】：DOMNodeInserted or hashchange

【发布时间】：2011-05-30 22:46:56

【问题描述】：

我正在尝试编写一个“覆盖”在 Facebook 页面顶部的 javascript 脚本。它使用 DOMContentLoaded 来检测何时加载内容，然后添加一些额外的内容。但是，因为 Facebook 在转到新页面时实际上并没有“重新加载”页面（它只是使用 AJAX），所以 DOMContentLoaded 处理程序不会运行再说一遍，即使有新的东西要浏览。

无论如何，为了检测更改，我考虑使用 onhashchange 因为 Facebook 曾经更改页面的哈希，但是在 Firefox 4 中（我需要支持 Firefox 3 及更高版本，但没有其他浏览器），Facebook 没有不再更改哈希值，在 Firefox 3.6 之前的版本中没有 onhashchange。

我考虑过使用 DOMNodeInserted，但这真的会减慢页面速度吗？ （我真的不能在这个脚本中放慢速度。）

【问题讨论】：

有没有其他人尝试过实现 DOMNodeInserted？速度/响应能力有问题吗？ （我确实有一个相当大的回调函数）

【参考方案1】：

您可能想要监视 windows.history 对象，请参阅以下答案，了解 facebook 如何使用它来更新页面： "Redirect" page without refresh (Facebook photos style)

【参考方案2】：

对于轻量级页面，它通常没有明显的效果。但是，在庞大的页面上（我在 gmail 上尝试过），这真的很慢，我什至不能顺利地撰写消息。该事件被添加到一个非常简单的 span 元素中，其中只有一个链接。像 DOMNodeInserted 和 DOMSubTreeModified 这样的事件是真正的阻碍。

更新：对于所有试图找到答案的人，请注意这些方法 DOMNodeInserted（或 DOMSubtreeModified）确实存在性能问题，因此根据新的 ECMA 规范，它是一个更快的侦听器：MutationObserver 用于做同样的事情（和更多）。

https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/