两个HTML块之间的差异：结构而不是行/字符？

Question

我正在寻找一个JavaScript diff引擎，它将返回两个HTML块结构的差异。也就是说，而不是“在这一行，在这样的角色，发生了什么事情”，它是“，这个元素被插入到这个元素之后”，或者“这个元素被删除了”，或者“这个文本节点是改变了“等等。

粗略的研究表明这很难。

具体情况是我有Markdown文本编辑器的实时预览。它只适用于文本，但只要用户发布了一个YouTube <iframe>嵌入，就会在每次击键时呈现/重新加载，这非常昂贵。大图像也很难，因为它们从缓存加载时会产生恶心的抖动效果（至少在WebKit中）。

什么是美丽的替代jQuery.html()，而不是仅仅替换HTML内容实际上比较旧的和新的，并选择性地更新/插入/附加，以便保持不变的元素。

Answer 1

1. 深度克隆（通过node.cloneNode(true)）两个节点（如果它们当前正在使用中）（即，如果您的JavaScript中引用了任何子节点）。
2. 通过node.normalize()规范化两个节点。
3. 迭代两个节点的每个子节点，并与node.isEqualNode(other_node)进行比较。
4. 对于每个不相等的节点，深入迭代以查看是否可以找到任何相等的子节点。

老实说，你最好不要使用文本差异库而不是制作自己的基于DOM的差异库。