我有2个JS变量。 before和after。它们包含SAME html文档，但有一些修改。它们之间的变化约为1％-10％。我想将正文从before更新为after。变量before和after是原始字符串。
我可以这样做：
document.documentElement.innerHTML=after
问题在于，如果我以这种方式渲染它看起来不太好。渲染需要时间，渲染之间有一个白色屏幕。我想在一秒钟内修改用户10（修改视频）
所以我想做什么。我只想通过分析before和after的HTML文字来搜索并查找仅更改的元素。
我的解决方案：
我可以使用Javascript Library for diff & match & patch在文本中找到更改和位置。
问题是：
我发现文字发生了变化。如何只查找更改的元素。我只更新那些元素。
我想，也许要创建一个范围，包含每个更改，并更新范围，但是如何做到这一点？
如果有任何不清楚的地方，请发表评论，我会更好地解释。
答案 0 :(得分：5)
我找到了一个非常好的库：https://github.com/patrick-steele-idem/morphdom
轻量级模块，用于变形现有DOM节点树以匹配a 目标DOM节点树。它速度快，适用于真正的DOM-no virtual DOM在这里！
非常容易使用，并且正是我需要的
答案 1 :(得分：0)
如果我正确地理解了你的问题，那么我将要做的是，
1）创建一个新对象（视图对象），它将控制DOM元素的呈现。 （与MVC类似）
2）在这个对象中，我将创建3个函数。
a) init function (contains the event-handlers)
b) render1 function (which will contain elements in before element)
c) render2 function (which will contain elements in after element)
每当我需要更改类/ id / body / document的HTML时，我将在init函数中更改它并调用包含after元素的render2函数。
这不应该给出任何错误，但浏览器必须工作以呈现所有页面，但渲染可以分为多个文档元素。因此，只要您需要渲染文档的一部分，请创建单独的渲染函数。
P.S。可以有不同的方法。
答案 2 :(得分：0)
您必须实施LCS（最长公共子序列）。要更好地了解此算法，您可以观看this YouTube视频。第一次学习Longest Common Substring也更容易。
答案 3 :(得分：0)
我想我有一个解决方案。 virtual-dom可以为我做这项工作。我可以创建两个VTree，制作差异，并应用补丁。
来自virtual-dom的文档：
virtual-dom。
手动DOM操作很麻烦并且跟踪以前的DOM 国家很难。解决此问题的方法是将代码编写为 每当状态发生变化时，您都在重新创建整个DOM。当然， 如果你每次申请时都重新创建了整个DOM 状态改变了，你的应用程序将非常慢，你的输入字段会 失去焦点。
virtual-dom是一组旨在提供的模块 表示应用程序DOM的声明性方式。而不是 简单地说，当您的应用程序状态发生变化时更新DOM 创建一个虚拟树或VTree，它看起来像DOM状态 你要。然后，virtual-dom将弄清楚如何使DOM看起来 这样就可以高效地重新创建所有DOM节点。
virtual-dom允许您在状态发生变化时更新视图 创建视图的完整VTree，然后修补DOM 有效地看起来像你描述的那样。这导致了 保持手动DOM操作和以前的状态跟踪 您的应用程序代码，促进清晰和可维护的渲染 Web应用程序的逻辑。