在切换其可见性之前检查DOM元素的可见性是否值得?或者这是不成熟的优化?

时间:2012-04-22 16:11:15

标签: jquery optimization visibility premature-optimization

请考虑以下jQuery代码:

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

我的问题:

  • 在发出show()命令之前检查元素的可见性是否值得?
    • 即。 DOM写入比DOM读取更昂贵,并且这种模式是否包括小的性能优化?
  • 或者是没有实用程序的可见性检查,并且简单地,无条件地发出show()命令会更清晰吗?

3 个答案:

答案 0 :(得分:6)

如果你想要它显示,我不会费心检查它是否隐藏 - 我只是展示它。我认为开始时不进行条件检查会有一个很小的优势,但我也相信它可能是微不足道的。

我已经创建了一个性能测试,表明没有检查结果,执行速度提高了25%。您可以在http://jsperf.com/is-hidden-check在线查看(并在少数浏览器中进行测试)。

答案 1 :(得分:2)

除了给你一个极短的速度增加,它可能甚至不总是按你想要的那样行事:

Source:

  

如何:确定隐藏在jQuery 1.3.2中已更改。一个元素是   如果它或它的任何父母没有占用任何空间,则假定被隐藏   该文件。不考虑CSS可见性(因此   $(elem).css('visibility','hidden').is(':hidden') == false)。

检查可见性并不是非常复杂,但恕我直言,即使这个摘录显示它并非完全无关紧要。虽然您可以在每次要确保此代码正常工作时使用:hidden时确保可见性检查正常工作的问题,但您可能会忘记可能有的5毫秒保存的机会,而是每次在这个区域出现问题时节省自己花在理解代码和检查文档上的时间。

只需使用普通的show() ;如果有理由事先进行检查,我相信制作jQuery的好人会在某个地方的文档中提供建议,或者只是将检查硬编码到show方法中/:D

答案 2 :(得分:0)

您的可见性检查可能会节省一些努力,因为如果它没有真正隐藏,它将不会发出.show()。

所以我认为顺其自然