$（'element'）。show（）; vs $（'element'）。css（'visibility'，'visible'）：哪个更好用？

Question

有两种显示/隐藏元素的方法。首先是$('element').show()，其中show()是Jquery中的函数，而$('element').css('visibility', 'visible')的{​​{1}}也来自Jquery。哪个更快，使用什么？我认为第一个更快。

Answer 1

  

.show()大致等同于调用.css（“ display”，“ block”），除了将display属性恢复到最初的状态。如果某个元素的显示值为inline，则该元素将被隐藏并显示，它将再次以inline显示。

http://api.jquery.com/show/

设置.css('visibility', 'visible')仅在先前使用visibility: hidden隐藏的情况下才会显示。 show()改为更改display属性。两种方法之间的主要区别在于它们的布局行为（visibility:hidden元素仍然占据布局中的空间，display:none元素不会占据布局）。

关于速度/性能：when in doubt, run a benchmark。与您的猜测相反，jQuery的可见性比显示/隐藏要快得多。在香草JS中，这种差异消失了，至少对于简单的文档布局而言是这样。两种方法的速度大致相同（并且都比jQuery方法快得多）。我在链接基准测试中得到的结果：

• jQuery显示/隐藏x 20,913 ops / sec±2.49％（采样了75个运行）
• jQuery可见性x 121,719 ops / sec±1.46％（已采样81个运行）
• 香草味显示/隐藏x 453,574 ops / sec±2.51％（采样了85个运行）
• 香草可见度x 450,610 ops / sec±1.98％（采样了89个运行）

很难想象在这种情况下，这种性能差异会很明显。布局差异通常是这里的真正决定因素...但是，如果您的应用需要每秒显示和隐藏成千上万个元素，则应针对您的实际代码运行基准测试，并了解是否有关于您的特定细节一种实施方式，将使其中一种更为可取。

Answer 2

正如注释中指出的，.css()和.show()都是jQuery的一部分，两者之间的主要区别在于，第一个为css visibility属性分配了一个特定的值，其他恢复元素的初始display值（例如块或内联块）

Answer 3

在可见性和隐藏/显示中，样式都将作为内联添加

可见度
.css('visibility', 'visible');，仅可见性将被隐藏。但是显示不会没有。

隐藏/显示
它非常简单，相当于.css("display", "block")；

哪个更快？
我认为，通常不将其用于此类功能，而用于交互，事件中的功能等。