我了解到 javascript 通过修改 off-dom 获得了显着的性能优势。今天早些时候，我正在阅读克隆文档：
"请注意，当使用 .clone() 方法，我们可以修改克隆的 之前的元素或其内容 （重新）将它们插入 文件。”
这是否意味着如果我有 1,000 个 LI，并且我想对所有 LI 进行更改，最有效的方法是克隆它，修改克隆，销毁原始，然后放置克隆？
您将如何以最有效的方式进行此修改？
【问题讨论】：
标签： javascript jquery performance dom
实际上，这意味着在将克隆的元素插入到 DOM 之前对其进行修改比将克隆的元素插入到文档中然后修改它们更有效。 clone-modify-replace 是否比简单地就地修改元素更有效可能取决于 lot 您打算进行哪些修改...与往常一样，分析您的代码 然后根据真实数据选择最符合您需求的选项。
...当您使用它时...您可以直接“分离”一个 DOM 元素：只需调用 removeChild()（或者，由于您使用的是 jQuery，detach()） - 元素仍然会只要您保留对它的引用，它就存在，并且可以在您完成修改后重新插入。
...哦，无论您最终使用哪种技术，您几乎肯定会看到删除父 UL 比删除每个 1K 子 LI 元素的结果更好，一次一个...
【讨论】：
remove() 然后：var ul = $("ul").remove(); /* modifications to children of ul ... */ ; ul.appendTo("body"); 请注意，jQuery 在分离的元素上工作得很好——你仍然可以搜索和过滤列表的后代以正常方式。
.remove() 删除与节点关联的 jQuery 数据，例如事件。正如我在回答中所建议的那样，使用.detach() 会更有意义。
detach() 方法是专为您正在尝试做的事情而设计的方法：
编辑：值得一提的是，每个人都进行自己的分析/测试，这是很好的常识性建议。此外，看到您将获得可笑的性能提升也很有趣。 :)
我的经验法则是： 如果您对涉及添加、删除或移动元素的许多元素进行操作，则绝对应该使用 .detach()，如果您正在执行 addClass 之类的操作，请不要使用 detach。
如果您不确定具体的操作或有多少符合“多”的条件，您应该运行测试。
这是我在这个问题的辩论中所做的一个简单比较： http://jsbin.com/uwode3/5 与 http://jsbin.com/uwode3/4
【讨论】：
detach() 只是 remove() 的包装器，带有一个额外的参数来保留 jQuery 数据。 github.com/jquery/jquery/blob/master/src/manipulation.js#L298这如何回答 OP 关于性能的问题？
还有一种更有效的方法：.detach() 从树中修改它们，然后重新插入。
但是，如果您只修改 DOM 对象的属性，而不是读取它们，则无论如何都不应该触发回流（这是缓慢的操作），至少在 firefox 中不会（从我读过的内容来看）。虽然分离它们，然后重新连接，但确保最多有两次回流。
【讨论】：