jQuery - 显示/隐藏 - 检查是否已设置

Question

  

可能重复：
  Jquery performance: hide() vs is(':visible') - which is faster?

在调用jQuery.hide（）函数之前检查（通过自己的条件）是否已隐藏元素是否有意义？ （与jQuery.show（）类似）

读取函数源代码，在我看来，无论元素属性如何，它都会运行。是否时间昂贵检查或让函数设置属性？

Answer 1

这些问题总是通过实际性能测试得到最好的回答，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();
}

仍然显示当已经设置了所需状态时，第二个选项更快。

---

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

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

和

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

Answer 2

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

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

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