Meest efficiënte methode om DOM-veranderingen te detecteren/monitoren?

Ik heb een efficiënt mechanisme nodig om wijzigingen in de DOM te detecteren. Bij voorkeur cross-browser, maar als er efficiënte middelen zijn die nietcross-browser zijn, kan ik deze implementeren met een faalveilige cross-browser methode.

In het bijzonder moet ik veranderingen detecteren die van invloed zijn op de tekst op een pagina, dus nieuwe, verwijderde of gewijzigde elementen of wijzigingen in de binnentekst (innerHTML) zijn vereist.

Ik heb geen controle over de wijzigingen die worden aangebracht (ze kunnen te wijten zijn aan javascript van derden, enz.), dus het kan niet vanuit deze hoek worden benaderd – ik moet op de een of andere manier “controleren” op wijzigingen.

Momenteel heb ik een “quick’n’dirty”-methode geïmplementeerd die body.innerHTML.lengthmet tussenpozen controleert. Dit zal natuurlijk geen wijzigingen detecteren die ertoe leiden dat dezelfde lengte wordt geretourneerd, maar in dit geval is het “goed genoeg” – de kans dat dit gebeurt is extreem klein, en in dit project zal het niet resulteren in het niet detecteren van een wijziging in verloren gegevens.

Het probleem met body.innerHTML.lengthis dat het duur is. Het kan tussen de 1 en 5 milliseconden duren in een snellebrowser, en dit kan veel problemen veroorzaken – ik heb ook te maken met een groot aantal iframes en het klopt allemaal. Ik ben er vrij zeker van dat het duur is om dit te doen, omdat de innerHTML-tekst niet statisch wordt opgeslagen door browsers en elke keer dat deze wordt gelezen, moet worden berekend op basis van de DOM.

De soorten antwoorden die ik zoek zijn van alles, van “precies” (bijvoorbeeld gebeurtenis) tot “goed genoeg” – misschien iets dat zo “quick’n’dirty” is als de methode innerHTML.length, maar die wordt uitgevoerd sneller.

BEWERKEN:
Ik moet er ook op wijzen dat hoewel het “leuk” zou zijn om het precieze element dat is gewijzigd te detecteren, het geen absolute noodzaak is – alleen het feit dat er elkeverandering is geweest, zou goed genoeg zijn . Hopelijk verruimt dit de reacties van mensen. Ik ga mutatiegebeurtenissen onderzoeken, maar ik heb nog steeds een noodoplossing nodig voor IE-ondersteuning, dus alle gekke, creatieve, buiten de gebaande paden zijn zeer welkom.


Antwoord 1, autoriteit 100%

Om dit up-to-date te brengen, schrapt de DOM4-standaard Mutation Events en vervangt deze door Mutation Observers: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver


Antwoord 2, autoriteit 28%

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

jQuery ondersteunt nu een manier om gebeurtenissen toe te voegen aan bestaande en toekomstige elementen die overeenkomen met een selector: http: //docs.jquery.com/Events/live#typefn

Nog een interessante vondst – http://james.padolsey.com/javascript/monitoring -dom-properties/


Antwoord 3, autoriteit 22%

Mutatiegebeurtenissenzijn de W3-aanbeveling van wat u zoekt..

Niet zeker of ze overal worden ondersteund.. (IE zal ze waarschijnlijk niet ondersteunen..)


Antwoord 4, autoriteit 3%

U kunt proberen de gebeurtenissen DOMNodeInserted en DOMNodeRemoved te gebruiken. Volgens Quirksmode werken ze in de meeste browsers, met de opmerkelijke uitzondering van IE…

http://www.quirksmode.org/dom/events/index.html

Other episodes