免责声明：
我试图提供足够的背景来预先解决你们所有人可能对我提出的问题。不要被这个问题的长度吓到：我写的很多东西都是 非常 可以浏览（特别是我提出的潜在解决方案）。
目标：
我希望实现的效果是在同一页面上的多个位置显示相同的元素（以及所有后代）。我当前的解决方案（请参阅下面的更多详细信息）涉及必须克隆/复制，然后追加到我希望它出现在DOM中的所有其他位置。我在这里要求的是更好（更有效）的解决方案。我对可能更有效的解决方案有一些想法（见下文）。请判断/批评/解散/扩充这些，或添加您自己更优秀的解决方案！
“为什么？”你问？
好吧，我想要多次显示的元素（以及它的后代）可能具有很多属性和内容 - 所以克隆它，并将其附加到其他地方（有时候不止一个其他地方）可能会非常资源占用DOM操作操作。
一些背景：
我无法准确描述这种情况（该死的NDA！）但是 实质上 我得到的是一个WYSIWYG html文档编辑器。当一个人正在编辑DOM时，我实际上是将“原始”节点和“已更改”节点保存在div中，隐藏“原始”并让用户修改新的（“已更改”）节点他们心中的内容。这样，用户可以在保存之前轻松查看他们所做的更改。
之前，我只是让用户浏览“diff divs”并暂时取消隐藏“原始”节点，以显示“内联”更改。我现在要做的是让用户以并排的方式查看整个“原始”文档及其编辑（“更改”）的文档。而且，我可能希望通过多个编辑会话保存更改，并同时并排显示“N”个版本。
当前解决方案
我目前解决此问题的方法如下：
将整个dang dom（除了“工具栏”以及它们实际上没有编辑的东西）包装在一个div（我称之为“pane1”）中，并创建一个新的div（我称之为“pane2”） “）。然后将pane1的内容深度克隆到pane2中，并在pane1中仅显示“原始”节点，并且在pane2中仅显示“已更改”的节点（在差异区域中 - 除此之外的所有内容都将由切换开关显示/隐藏工具栏）。然后，对窗格3到N重复此操作。
当前解决方案的问题：
如果用户正在编辑的文档变得超长，或包含图片/视频（具有不同的src属性）或包含许多花哨的样式事物（列，表等），那么DOM可能会变得非常大/复杂，并且尝试克隆和操纵它可以使浏览器慢慢爬行或死亡（取决于DOM的大小/复杂性以及需要制作多少克隆以及浏览器/运行它的机器的效率）。如果大小是问题，我当然可以做一些事情，比如实际从DOM中删除隐藏的节点，但这是更多的DOM操作操作占用资源。
潜在解决方案
1.找到一种方法使DOM更简单/轻量级
所以我目前正在进行的克隆/操作更有效率。 （当然，我正尽力做到这一点 无论如何，但也许这就是我所能做的一切）。
2.使用Canvas元素或其他东西创建版本的静态表示。
我听说有一个技巧可以将HTML包装在SVG元素中，然后将其用作图像源并将其绘制到画布上。我认为那些静态画布（canvi？）的内存占用量比克隆的DOM节点要小得多。并且操纵DOM（隐藏/显示适当的节点），然后绘制图像（冲洗和重复）应该比克隆节点和操纵克隆更快更有效。 （也许我错了？请告诉我！）
我在有限的容量中尝试过这种方法，但是在SVG中将我的HTML包含在一些奇怪的情况下呈现它的方式 - 也许我只需要对元素进行一些消息以使它们正确显示。
3.找一些神奇的元素
只是引用另一个节点并且看起来像它一样，而不是真正的克隆（因此在某种程度上神奇地更加轻量级）。即使这意味着我无法将这个魔法元素与它“引用”（或其假孩子）的节点分开操作 - 在这种情况下，我仍然可以将它用于未更改的部分，并希望削减一些内存使用/ DOM操纵操作。
4.执行服务器端的某些步骤。
我确实有能力执行服务器端代码，所以可能效率更高（我的一些用户 威力 在移动设备或旧设备上）获取所有ajax-y并发送DOM的相关部分（可能是用户正在编辑的文档的“根”，或者只是特别重的“diff divs”）到服务器是克隆/操纵，然后请求服务器操作的“克隆”并将它们粘贴在适当的窗格/位置。
假它使它“感觉”更有效率
而不是一次性完成这些操作并使浏览器等到操作完成以重新绘制UI，我可以在“块”中执行操作并让浏览器重新渲染并在下一步之前休息一下块。这可能实际上会花费更多的时间，但对于临时用户来说，它可能“感觉”更快（哈哈，傻瓜......）。最后，我想，它 是 用户体验是最重要的。
脚注：
再一次，我是NDA'd，这阻止我在这里发布实际代码，就像我想的那样。一世 认为 我已经彻底解释了这种情况（也许吧 太彻底了 - 如果存在这样的事情）所以你不必看到代码给我一个通用答案。如果需要，我想我可以编写一些示例代码，这些代码与我公司的IP有很大的不同，并在此处发布。如果你想让我这样做，让我知道，我会很乐意（好吧，不是真的，但无论如何我都会这样做）。