Dealing with dynamic content

The MutationObserver

With the advent of more and more dynamic content in recent years, efficiently reacting to the content changes is becoming an issue. Historically a web page would dynamically inject some simple content (ie. more results) to a page at the user's request. This is simple enough to do - React to the user's request, wait for the data to come back, inject it into the page. But what if your entire page is dynamically generated? What if the content is coming from a multitude of systems, with differing response times and request/response formats? It can easily become difficult to keep track of what is coming and going, how to react to new content and importantly, when to react.

Fortunately, in an attempt to streamline all this, the World Wide Web Consortium (W3C) introduced the MutationEvent event. This event is fired when a DOM object mutates (ie. the content, attributes, nodes etc change). Unfortunately the interface's design is flawed, it fires events far too often and has big implementation and performance issues.

Fortunately, a replacement interface is on it's way. The MutationObserver. It is a new interface to address the same issues as MutationEvent attempted to solve, but in a more performant manner. Unfortunately, as is always the challenge to harnessing the power of new web technologies, compatibility across browsers and platforms to date is not great. At this point, the major desktop browsers that support the new interface are Chrome 18+, Firefox 21+, Safari 7 and IE 11. The story is even worse for mobile browsers: Chrome 36+, Firefox 31+, Safari 7 and IE doesn't support it at all!