javascript - 哪个更贵？显示-隐藏 dom 节点或创建-删除 dom 节点

Question

哪一个更贵？

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

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

对于少数人来说，这甚至有关系吗？移动应用程序怎么样？

Answer 1

仅对于少数几个元素，两者之间的差异将非常小——绝对可以忽略不计。

话虽如此，除非您使用 jQuery.show()和.hide(). jQuery.hide()比任何其他隐藏元素的方法都要慢得多。如果您想知道原因，请阅读“为什么.hide()速度较慢？” 我的答案底部的部分。

无论如何，您应该根据最适合您需求的方法做出决定。如果您不再需要该元素，也可以将其删除。如果您只是暂时或在某些情况下不想隐藏它，请显示/隐藏它。

但是，如果您想自己测试一下，那就去吧:)

---

为什么更.hide()慢？

jQuery.hide()与 using 基本相同，.css('display','none') 只是它缓存了display样式的先前值，因此当您调用 时.show()，您的元素将正确还原为看起来与原来完全相同。如果它有display:inline，它会在重新显示时拥有它。如果它有display:block，它就会有display:block。这可能非常有用。

这是一个例子：

假设我们有一个 id="myDiv" 的 div，它在外部文件中的样式为display:inline. 我们想隐藏它。

通过这种.css方式，我们会这样做：

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

然后稍后某个时候，您的一位开发人员想要在某些条件下再次展示它。他不知道该display属性应该是什么，因为 css 位于某个外部文件中。大多数开发人员默认使用display:block，如下所示：

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

但是在这种情况下，我们会得到完全不同的风格，因为它最初是inline. 聪明的开发人员可以毫无问题地找出问题所在，但并非所有开发人员都很聪明:)

使用.show()and .hide()，这成为一个非问题。我们不在乎它曾经有什么风格。我们只是希望它回到原来的位置，而这正是它要做的。