$('element').show();vs $('element').css('可见性', '可见'):哪个更好用?



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

.show()大致相当于调用.css("display","block"(,只是显示属性恢复到最初的样子。如果元素的显示值为内联,则被隐藏并显示,它将再次以内联方式显示。

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

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

至于速度/性能:如有疑问,请运行基准测试。 与你的猜测相反,jQuery可见性比显示/隐藏快得多。 在原版JS中,这种差异消失了,至少对于简单的文档布局是这样;这两种方法的速度大致相同(并且都比任何一种jQuery方法快得多(。 我在链接基准上的结果:

  • jQuery 显示/隐藏 x 20,913 操作/秒 ±2.49%(采样 75 次运行(
  • jQuery 可见性 x 121,719 次操作/秒 ±1.46%(抽样运行 81 次(
  • 原版显示/隐藏 x 453,574 次操作/秒 ±2.51%(采样 85 次运行(
  • 原版可见性 x 450,610 次操作/秒 ±1.98%(89 次采样(

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

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



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

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



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



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

最新更新