2

可能重复：
Jquery 性能：hide() vs is(':visible') - 哪个更快？

在调用 jQuery.hide() 函数之前检查元素是否已经隐藏是否有意义？（并与 jQuery.show() 类比）

阅读函数源代码，在我看来，不管元素属性如何，它都会运行。检查或让函数集属性结束是否需要更多时间？

4

2 回答 2

3

这类问题最好通过实际的性能测试来回答，而 jsperf 系统使测试变得非常容易。

令我惊讶的是，如果已经设置了所需的样式，那么在设置之前先检查一下似乎确实可以节省一些性能周期（在 Chrome 和 Firefox 中）。

您可以在这里看到许多不同的组合：http: //jsperf.com/hide-vs-check

作为这两个选项之间最简单的比较：

elem.style.display = "none";
elem.style.display = "none";

和

elem.style.display = "none";
if (elem.style.display !== "none") {
    elem.style.display = "none";
}

第二个选项稍微快一点。这表明设置样式，即使它已经设置为该值仍然需要大量成本，并且确实可以节省时间以避免在不需要时设置它。

或者两个选项的 jQuery 版本：

elem.style.display = "none";
elem$.hide()

和

elem.style.display = "none";
if (elem$.css("display") !== "none") {
    elem$.hide();
}

仍然表明，当已设置所需状态时，第二个选项更快。

但是，如果需要更改状态，那么额外的测试（显然）会减慢您的速度。这里的第一个选项比第二个选项快，因为如果条件评估为真，则条件只会花费额外的时间：

elem.style.display = "block";
elem$.hide()

和

elem.style.display = "block";
if (elem$.css("display") !== "none") {
    elem$.hide();
}
于 2012-10-09T01:58:13.797 回答
1

检查属性更耗时。首先 jQuery 必须找到元素，然后检查以下所有内容：

  • 它们的 CSS 显示值为none.
  • 它们是带有type="hidden".
  • 它们的宽度和高度明确设置为 0。
  • 祖先元素是隐藏的，因此该元素不会显示在页面上。

在另一种情况下，设置属性只需 2 个步骤 - 找到元素并分配（或覆盖）属性。

于 2012-10-09T00:38:53.760 回答