Implement DOM diffing logic to improve bindTemplate updates

[ThaNarie]

Situation

Currently bindTemplate receives an updated HTML string whenever the data changes that is updated in the DOM by setting innerHTML.
Especially with big lists, or items that contain external resources that need to be loaded again, this is not an ideal experience.

Using a "virtual dom" approach is not an option, since we internally don't have that as an abstraction layer. All bindings directly update the HTML only where changes are happening, which is the most performant option.

Even on the HTML injected by bindTemplate there can be bindings applied, so the actual DOM is the only thing that contains the "latest state". This means that any optimisation we come up with should do any diffing based on the HTML – you cannot keep a cached version of a virtual dom structure in memory to re-use in a next render.

Approach

Find a DOM diffing library that can work on the DOM tree and HTML strings, that can:

• find the difference between old and new HTML
• be smart about items in lists (e.g. using a key)
• allows applying those diffs to update the DOM

A quick search resulted in https://www.npmjs.com/package/diff-dom, but there might be better options out there.

Considerations

• File size - The linked library above weighs quite a bit, potentially because of some features we don't need.
• License - LGPL-3.0 might not be what we are looking for

Potentially we can "fabricate" our own diffing implementation by piecing existing libraries / examples together.
Maybe the htm parser that we already include for templates can be re-used to build up the AST from the html string.

[psimk]

I would suggest taking a look at how other UI libraries implement dom diffing, maybe we can integrate their logic without any of the virtual DOM. e.g. https://github.com/preactjs/preact/blob/master/src/diff/index.js