I just pushed quickdiff public, which I’ve been working on the past few days in relation to work on notepag.es.

It’s a small jQuery plugin that uses some assumptions about live preview DOM changes to provide cheap partial updates from a live DOM to a newly generated, and can cope with transformations on the live DOM. This was particularly needed for notepag.es, which uses MathJax. Due to the changes MathJax makes to the output, a simple DOM comparison cannot be made. quickdiff solves this issue by allowing filters to treat certain DOM nodes differently for comparison.

quickdiff works by doing a forward traversal of the two DOMs in parallel, comparing nodes as it goes. If it finds two nodes are different, it records the path through the DOM to the difference. It then performs a reverse traversal over the two DOMs and finds the first difference. If the paths are the same, it has found a single changed node in the DOM. If the paths differ, then either multiple elements have changed, or nodes have been inserted or deleted. Using the shared path of the differences gives the root node of the change, and then the next steps in the paths can be used to return a segment of nodes which contain the change.

This is as far as it goes in trying to find the actual change, to reduce computation time, and because of the assumption that the two DOMs are changing in isolated chunks each time. The chance for a live preview to have changes at both the top and bottom of the output are fairly small, excepting for operations such as search/replace.


If you spot an error and would like to submit a correction, you can view the source for this post on GitHub.