Lately I've been looking into Facebook's open source React.js library. It's a front-end javascript user interface library that has a few interesting features. The most interesting one to me was something referred to on a React.js blog post as reconciliation:
When your component is first initialized, the render method is called, generating a lightweight representation of your view. From that representation, a string of markup is produced, and injected into the document. When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM.
Finally the post continues:
We call this process reconciliation.
In my research, or rather "googlesearch", I stumpled upon this article which goes into more detail about the diffing process. I highly recommend giving it a read as it goes into detail into the heuristics of how React most efficiently adds/removes elements from the DOM, since doing a real "diff" would not be efficient.
I like the idea of seeing this diffing process, so I wrote a simple example that demonstrates the reconcilation process. In order to "see" the process, however, you will need to turn on "Show Painted Rectangles" in the Chrome debugger to see the result (open Chrome Dev Tools, press ESC, and go to the rendering tab).