javascript - jquery clone() 内部是否使用 documentfragment ？

Question

我正在动态地将元素插入到 dom 中，为此我使用以下步骤:(jquery) 初始 dom 结构如下:

<div parent div>
 </div>
 <div child div template>
</div>

• 使用 jquery .clone() 克隆父 div
• 克隆子 div 并进行操作
• 附加到克隆的父级
• 对所有子数据执行此操作
• (parentdiv 原始).replaceAll(clonedparent)

基本上我想以某种方式克隆父 div，以便它可以作为documentfragment，这样在 dom 上就不会发生附加操作并获得性能。

jQuery clone() 会通过像 documentfragment 一样表现来提供性能优势吗？或者有更好的方法来做到这一点吗？我不想将每个子元素构造为 HTML 字符串，因为它们的结构非常复杂。

Answer 1

jQuery clone() 执行普通 DOM cloneNode()，但在 IE 上除外，如果您这样做，它会不适本地复制事件监听器。为了解决这个问题，jQuery 在 IE 上做了一些你不想知道的极其可怕的事情。这可不快。

replaceAll() 也不快。它必须从 DOM 中删除每个子节点(这在 jQuery 中特别慢，因为从 DOM 中删除某些内容时需要检查数据)并一一添加新节点。

我真的不明白克隆到底是什么让你来到这里的。只需直接对 child 进行操作即可。如果您有很多操作要做，并且触发了重新布局，导致速度变慢，您可以暂时隐藏父级或将其从文档中分离出来，然后在需要时重新附加它。完成了。