$('元素').show(); vs $('element').css('visibility', 'visible')：哪个更好用？答案

【问题标题】：$('element').show(); vs $('element').css('visibility', 'visible'): which is better to use?$('元素').show(); vs $('element').css('visibility', 'visible')：哪个更好用？
【发布时间】：2018-10-06 15:25:37
【问题描述】：

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

【问题讨论】：

$.fn.css 和 $.fn.show 都来自 jQuery。不确定“连接到 jQuery”是什么意思。 show() 设置 display，而不是 visibility。如果您不关心区别，请使用 show() 和 hide()，因为它们更短且更易于阅读。
@Ry- 好的，我编辑了。
@Ry- 那么速度呢？
我认为.show() 会更快，因为它特定于显示属性，而.css() 是所有属性的通用函数
带宽与客户端性能完全不同——一旦 jQuery 本身已下载并且客户端脚本正在运行，网络条件就无关紧要了（除非您开始进行 ajax 或其他网络调用）。

标签： javascript jquery css function

【解决方案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 可见性比显示/隐藏要快得多。在 vanilla JS 中，这种差异消失了，至少对于简单的文档布局而言；两种方法的速度大致相同（并且都比任何一种 jQuery 方法都快很多）。我在链接基准上的结果：

jQuery 显示/隐藏 x 20,913 操作/秒 ±2.49%（采样 75 次运行）
jQuery 可见性 x 121,719 ops/sec ±1.46%（采样 81 次运行）
vanilla show/hide x 453,574 ops/sec ±2.51%（采样 85 次运行）
普通可见度 x 450,610 ops/sec ±1.98%（采样 89 次运行）

很难想象在任何合理的情况下这种性能差异会很显着；布局差异通常是这里真正的决定因素......但是如果您的应用程序需要每秒显示和隐藏数万个元素，您应该针对您的实际代码运行基准测试并找出是否有关于您的实施，这将使一个或另一个更可取。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

哪个更快？
我认为，通常它不用于那种功能，但它用于交互、事件中的功能等......

【讨论】：