检测/监控 DOM 变化的最有效方法? [英] Most efficient method of detecting/monitoring DOM changes?

问题描述

我需要一种有效的机制来检测 DOM 的变化.最好是跨浏览器，但如果有任何不是跨浏览器的有效方法，我可以使用一种故障安全的跨浏览器方法来实现这些.

I need an efficient mechanism for detecting changes to the DOM. Preferably cross-browser, but if there's any efficient means which are not cross browser, I can implement these with a fail-safe cross browser method.

特别是，我需要检测会影响页面上文本的更改，因此需要任何新的、删除的或修改的元素，或者对内部文本 (innerHTML) 的更改.

In particular, I need to detect changes that would affect the text on a page, so any new, removed or modified elements, or changes to inner text (innerHTML) would be required.

我无法控制所做的更改(它们可能是由于 3rd 方 javascript 包含等造成的)，因此无法从这个角度进行处理 - 我需要以某种方式监视"更改.

I don't have control over the changes being made (they could be due to 3rd party javascript includes, etc), so it can't be approached from this angle - I need to "monitor" for changes somehow.

目前我已经实现了一个quick'n'dirty"方法，它每隔一段时间检查 body.innerHTML.length.这当然不会检测到导致返回相同长度的更改，但在这种情况下足够好" - 这种情况发生的可能性非常小，并且在这个项目中，无法检测到更改将不会导致在丢失的数据中.

Currently I've implemented a "quick'n'dirty" method which checks body.innerHTML.length at intervals. This won't of course detect changes which result in the same length being returned, but in this case is "good enough" - the chances of this happening are extremely slim, and in this project, failing to detect a change won't result in lost data.

body.innerHTML.length 的问题在于它很昂贵.在快速浏览器上可能需要 1 到 5 毫秒，这可能会使事情陷入困境 - 我也在处理大量的 iframe，这一切都会加起来.我很确定这样做的代价高昂是因为innerHTML 文本不是由浏览器静态存储的，每次读取时都需要从DOM 中计算出来.

The problem with body.innerHTML.length is that it's expensive. It can take between 1 and 5 milliseconds on a fast browser, and this can bog things down a lot - I'm also dealing with a large-ish number of iframes and it all adds up. I'm pretty sure the expensiveness of doing this is because the innerHTML text is not stored statically by browsers, and needs to be calculated from the DOM every time it is read.

我正在寻找的答案类型是从精确"(例如事件)到足够好"的任何东西 - 也许像innerHTML.length方法一样快速"和肮脏"，但执行更快.

The types of answers I am looking for are anything from the "precise" (for example event) to the "good enough" - perhaps something as "quick'n'dirty" as the innerHTML.length method, but that executes faster.

我还应该指出，虽然检测被修改的精确元素会很好"，但这并不是绝对必要的——只要有任何变化就足够了.希望这能扩大人们的反应.我将调查 Mutation Events，但我仍然需要对 IE 支持的后备，因此非常欢迎任何古怪的、有创意的、不合时宜的想法.

I should also point out that whilst it would be "nice" to detect the precise element that has been modified, it is not an absolute necessity - just the fact that there has been any change would be good enough. Hopefully this broadens people's responses. I'm going to investigate Mutation Events, but I still need a fallback for IE support, so any whacky, creative, outside-of-the-square ideas would be very welcome.

推荐答案

http://www.quirksmode.org/js/events/DOMtree.html

jQuery 现在支持一种将事件附加到与选择器对应的现有和未来元素的方法:http://docs.jquery.com/Events/live#typefn

jQuery now supports a way to attach events to existing and future elements corresponding to a selector: http://docs.jquery.com/Events/live#typefn

另一个有趣的发现 - http://james.padolsey.com/javascript/monitoring-dom-properties/

Another interesting find - http://james.padolsey.com/javascript/monitoring-dom-properties/

这篇关于检测/监控 DOM 变化的最有效方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！