Javascript jQuery克隆性能

我已经读到javascript从修改dom中获得了显著的性能优势。今天早些时候，我正在阅读克隆文档：

“请注意，在使用.clone（）时 方法，我们可以修改克隆的 之前的元素或其内容 （重新）将它们插入到 文件。”

这是否意味着，如果我有1000个LI，我想对所有LI进行更改，最有效的方法是克隆它、修改克隆、销毁原始版本并放置克隆

---

您将如何以最有效的方式进行此修改？

实际上，这意味着在将克隆元素插入DOM之前修改克隆元素要比将克隆元素插入文档然后修改它们更有效。克隆-修改-替换是否比简单地修改元素更有效可能在很大程度上取决于您打算进行的修改。。。像往常一样，分析您的代码，然后根据实际数据选择最能满足您需求的选项

…当你这么做的时候。。。您可以直接“分离”DOM元素：只需调用（或者，因为您使用的是jQuery）——只要您保留对该元素的引用，该元素就仍然存在，并且可以在完成修改后重新插入

---

…哦，不管最终使用哪种技术，几乎可以肯定的是，删除父级UL比删除每个1K子级LI元素效果更好，一次一个…

还有一种更有效的方法：从树中删除它们，修改，然后重新插入。
但是，如果您只修改DOM对象的属性，而不读取它们，那么无论如何都不应该触发回流（这是一个缓慢的操作），至少在firefox中不应该这样（根据我所读的）。尽管分离它们，然后重新连接可以确保最多有两次回流。

detach（）方法是专为您尝试执行的操作而设计的方法：

编辑：值得一提的是，每个人都有自己的评测/测试，这是一个很好的常识性建议。此外，看到您将获得的荒谬的性能提升也很有趣。：）

我的经验是： 如果您正在对许多元素执行操作，这些操作涉及添加、删除或移动元素，则绝对应该使用.detach（），如果您正在执行类似addClass的操作，则不要使用detach

如果您不确定具体的操作或有多少操作符合“多”的条件，您应该运行一个测试

在这个问题的辩论中，我做了一个简单的比较：

---

vs

你可以自己做一个基准测试-在循环中尝试每种方法（1000次）并对每个选项计时。像这样？-----------var$ul=$（ul）$ul.removeChild（）$ul.附录（“主体”）@玛崔姆：哦，对了，jQuery。。。然后使用：

var ul=$（“ul”）.remove（）；/*对ul…*/儿童的修改；ul.附录（“主体”）请注意，jQuery在分离的元素上运行良好-您仍然可以以正常方式搜索和筛选列表的子体。
.remove（）
删除与节点关联的jQuery数据，例如事件。正如我在回答中所建议的那样，使用
.detach（）
会更有意义。
detach（）
只是
remove（）
的包装，带有一个额外的参数来保留jQuery数据。这是如何回答OP关于性能的问题的？@patrick Oh，我不知道，但基本上其他人都提到了.detach（）。.detach（）方法有助于对DOM进行DOM操作，与.clone（）的思想相同。只有.detach（）比.remove（）更安全/lessbraincycles。@patrick，还可以查看1.4发行说明，其中提到了这个确切的分离用例。搜索detach。只是一个提示：如果您想轻松创建JavaScript性能测试用例，只需使用。