我试图提供足够的背景来预先解决你们所有人可能对我提出的问题.不要害怕这个问题的长度:我所写的很多东西都是非常划线的(特别是我提出的潜在解决方案).
我希望实现的效果是在同一页面上的多个位置显示相同的元素(以及所有后代).我当前的解决方案(请参阅下面的更多详细信息)涉及必须克隆/复制,然后追加到我希望它出现在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操作操作占用资源.
所以我目前正在进行的克隆/操作更有效率.(当然,我想这样做,因为我所能反正,但也许这是所有我能真正做到).
我听说有一个技巧可以将HTML包装在SVG元素中,然后将其用作图像源并将其绘制到画布上.我认为那些静态画布(canvi？)的内存占用量比克隆的DOM节点要小得多.并且操纵DOM(隐藏/显示适当的节点),然后绘制图像(冲洗和重复)应该比克隆节点和操纵克隆更快更有效.(也许我错了？请告诉我!)
我在有限的容量中试过这个,但是在SVG中将我的HTML包含在几个奇怪的情况下呈现的方式 - 也许我只需要对元素进行一些消息以使它们正确显示.
只是引用另一个节点并且看起来像它一样,而不是真正的克隆(因此在某种程度上神奇地更加轻量级).即使这意味着我无法将这个魔法元素与它"引用"(或其假孩子)的节点分开操作 - 在这种情况下,我仍然可以将其用于未更改的部分,并希望减少一些内存使用/ DOM操纵操作.
我确实有能力执行服务器端代码,因此可能更高效(我的一些用户可能在移动设备或旧设备上)获取所有ajax-y并发送相关的DOM部分(可能是" "用户正在编辑的文档的根",或者只是特别沉重的"差异")到服务器进行克隆/操作,然后请求服务器操作的"克隆"并将它们粘贴在适当的窗格/位置.
而不是一次性完成这些操作并使浏览器等到操作完成后重新绘制UI,我可以在"块"中执行操作并让浏览器重新渲染并在下一步之前休息一下块.这可能实际上会花费更多的时间,但对于临时用户来说,它可能"感觉"更快(哈哈,傻瓜......).最后,我想,这是用户体验,什么是最重要的.
再一次,我是NDA'd,这阻止我在这里发布实际代码,就像我想的那样.我想我已经彻底解释了这种情况(可能过于彻底 - 如果存在这样的事情)所以你不必看到代码给我一个通用答案.如果需要,我想我可以编写一些示例代码,这些代码与我公司的IP有很大不同,并在此处发布.让我知道你是否希望我这样做,我会很乐意(好吧,不是真的,但无论如何我都会这样做).