显示/隐藏一个DOM节点和创建/删除一个DOM节点，哪个更昂贵的调用？

Question

哪一个调用更昂贵？

1. 显示或隐藏DOM节点
2. 创建或删除DOM节点

假设我们只需要操作1个或几个（小于5）DOM节点，并且应用程序在桌面上运行。

对于少量DOM节点，是否有影响？对于移动应用程序呢？

- dvliman

---

启动JSPerf并找出答案 :) - Andrew Whitaker

Answer 1

两种方法的差异在于只有少数几个元素，它可以被认为是可以忽略不计的。但是，通过CSS显示和隐藏元素会更快，除非您使用jQuery的.show()和.hide()。jQuery的.hide()要比任何其他隐藏元素的方法慢得多。如果您想知道为什么，请阅读我的答案底部的“为什么.hide()较慢？”部分。

不管怎样，您应该根据哪种方法最适合您的需求来做出决定。如果您永远不需要该元素，那么最好删除它。如果您只是想暂时隐藏它或在特定条件下隐藏它，请使用show/hide。

但是，如果您想自己测试一下，请点击这里 :)

为什么.hide()较慢？

jQuery的.hide()基本上与使用.css('display','none')相同，只是缓存了display样式的先前值，因此当您调用.show()时，您的元素将正确地恢复为与原来完全相同的外观。如果它具有display:inline，则重新显示时仍将保持这种样式，如果它具有display:block，则将保持display:block。这很有用。

以下是一个示例：

假设我们有一个id为“myDiv”的div，它是在外部文件中使用display:inline进行样式设置的。我们想要隐藏它。

使用.css方法，我们会这样做：

$('#myDiv').css('display','none');

之后，有一天，你的一个同事想在特定条件下再次显示它。由于css在某个外部文件中，他将不知道display属性应该是什么。大多数开发人员默认为display:block，如下所示：

$('#myDiv').css('display','block');

然而，在这种情况下，我们将得到完全不同的样式，因为它最初是"inline"。聪明的开发人员没有问题找出了出了什么错，但并非所有开发人员都那么聪明:)

使用.show()和.hide()就不再是问题了。我们不关心它曾经拥有的样式，我们只想让它回到原来的位置，这正是它所能做到的。

- Phillip Schmidt