时间戳

首页 > 解决方案 > $('元素').show(); vs $('element').css('visibility', 'visible')：哪个更好用？

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

问题描述

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

标签： javascriptjquerycssfunction

解决方案

.show()大致相当于调用 .css("display", "block")，除了 display 属性恢复到最初的样子。如果一个元素的显示值为 inline，然后被隐藏并显示，它将再次被显示为 inline。

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

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

至于速度/性能： 如有疑问，请运行基准测试。与您的猜测相反，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 次运行）

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

推荐阅读