在切换DOM元素可见性之前检查其可见性是否值得？或者这是过早优化吗？

Question

请考虑以下jQuery代码：

if ($(this).is(':hidden')) {
    $(this).show();
}

我的问题：

• 在发出show()命令之前检查元素的可见性是否值得？
  • 即DOM写操作比DOM读操作更昂贵，这种模式是否包含一种小型性能优化？
• 或者可见性检查没有用处，直接无条件地发出show()命令是否会更清晰？

- Jim G.

---

将对象包装两次不会提高性能。您可以使用$MyElement = $(this)，然后操作$MyElement以提高性能。 - Steve Wellens

Answer 1

如果你想显示它，我不会费心检查它是否隐藏 - 我只会显示它。我认为不进行条件检查可能会带来小的性能优势，但我也相信这可能是非常微不足道的。我创建了一个性能测试，表明不进行检查可以使执行速度提高25％。您可以在线查看此内容（并在几个浏览器中进行测试）http://jsperf.com/is-hidden-check。

- Sampson

---

不错，我也通过你的测试用例进行了测试，确实节省了时间。 - Peeyush

Answer 2

除了可能在速度方面略微提高一点，实际上这可能并不总是按照你想要的方式进行操作：源代码。从jQuery 1.3.2版本开始，如何确定隐藏状态已经发生了变化。如果元素或其任何父级在文档中未使用空间，则假定该元素已隐藏。CSS可见性不会被考虑进去（因此$(elem).css('visibility','hidden').is(':hidden') == false）。检查可见性并不是非常复杂，但在我看来，即使这个例子中展示的内容也并不是易于理解的。虽然每次想确保此代码正常工作时都可以使用:hidden来处理确保可见性检查正常工作的问题，但您完全可以忘记能够节省5毫秒的时间，而是花费时间来理解代码并检查文档，以防出现任何问题。只需使用普通的show(); 如果先前有原因需要进行检查，我相信制作jQuery的人们会在文档中提供推荐方法，或将检查硬编码到show方法 /:D中。

- Gordon Gustafson

Answer 3

你的可见性检查可能会节省一些工作，因为如果它不是真正隐藏的话，它就不会发出 .show()。

所以我认为跟着它走吧。

- Peeyush