jQuery DOM 操作 - 性能比较？

Question

我正在学习使用 jQuery 进行 DOM 操作，并希望了解浏览器性能最佳实践。

假设我有两个 DOM 元素(div、p、ol 等)，我希望用户只能看到第一个元素，然后只能看到第二个元素。

我可以:

1. 使用replace()
2. remove() 第一个元素并 add() 第二个元素
3. 隐藏()第一个元素并显示()第二个元素

以下之间的性能差异是什么:

• 1 对 2
• 2 对 3
• 1 对 3

如果元素属于不同类型，是否需要额外考虑性能？或者如果元素是按钮或表单字段？

Answer 1

从 DOM 中删除和添加元素会消耗大量资源，因为 browser reflow ，浏览器必须重新渲染部分或全部页面。您希望尽可能避免回流；它们成本高昂。

替换本质上是删除然后添加，因此上述内容适用。

显示和隐藏是最好的，因为它只是向元素添加样式。

您应用这些方法的元素类型也不应该导致上述内容发生变化。

总之，使用 .show() 和 .hide() 可以获得最佳性能。