DOM MUTATIONS

DOM mutations are the changes that occur on the DOM.
Low-level apis have been provided by the browsers to watch for these mutations and react to them. They are the Mutation Events and MutationObserver apis.

Mutation Events

Mutation events were added as part of DOM3 specification. Their main goal was to provide a mechanism for notification when changes are made to the DOM, but due to bad API design they have had some issues and have since been deprecated.

Some of the issues which flawed the design where:-

• Major performance issues, It was found that adding mutation event listeners to the page incurred major performance costs and removing them did not reverse the problems. 
• Events fired quite frequently and synchronously.
• They caused a lot of crashes in the browsers.
• There were inconsistencies in browser implementations.

(For more information, see references below)

To solve these problems engineers at Google & Mozilla came up with a new proposal for what was called MutationObservers.

MutationObserver
This was the defined in the DOM4 specification. It solved most of the above problems through aspects of its design:-

• Mutations are now delivered in batches, asynchronously at the end of specific micro tasks rather than immediately they occur.
• Mutations are delivered to the observers as an ordered list of records.
• Desired changes can be specified, and undesired changes can be ignored.

(For an in-depth look, read the proposal link in the references)

The MutationObserver api is currently implemented in Chrome, Firefox, IE11 and Safari 6.0 browsers.

 MutationObserver example from the HTML5 rocks article

Mutation-summary
The mutation-summary is a nice javascript library which provides cross-browser mutation observer implementation. A nice abstraction of the DOM MutationObserver Api. Some interesting features

• It shows you the differences in the state before and after mutations.
• It can revert changes no matter how complex.
• You can specify the changes you are interested in.
• It is quite fast.

For more information see the Mutation Summary link in the references below

References

Mutation Events (MDN) https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Mutation_events?redirectlocale=en-US&redirectslug=DOM%2FMutation_events

Mutation Observer (MDN) https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Mutation Observer proposal http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/1622.html

HTML5 Rocks Article http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers

Mutation Summary https://code.google.com/p/mutation-summary/