Стоит ли проверять видимость элемента DOM перед переключением его видимости? Или это преждевременная оптимизация?

Обратите внимание на следующий код jQuery:

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

Мой вопрос:

  • Is it worthwhile to check for the element's visibility before issuing the show() command?
    • i.e. Are DOM writes more expensive than DOM reads, and does this pattern include a small performance optimization?
  • Или проверка видимости не связана с какой-либо утилитой, и было бы более чистым кодом просто безоговорочно выполнить команду show ()?

jquery optimization visibility premature-optimization
person Jim G.    schedule 22.04.2012    source источник
comment
Двойное обертывание объекта не повлияет на производительность. Вы можете использовать $ MyElement = $ (this), а затем манипулировать $ MyElement для повышения производительности.   -  person Steve Wellens    schedule 22.04.2012

Ответы (3)


arrow_upward
6
arrow_downward

Если вы хотите, чтобы это было показано, я бы не стал проверять, скрыт ли он - я бы просто показал его. Я предполагаю, что отказ от условной проверки дает небольшое преимущество производительности, но я также уверен, что это может быть довольно незначительным.

Я создал тест производительности, который показывает отсутствие результатов проверки при ускорении выполнения на 25%. Вы можете просмотреть это онлайн (и протестировать в нескольких браузерах) по адресу http://jsperf.com/is-hidden-check.

person Sampson    schedule 22.04.2012
comment
Хороший, я также тестировал ваш тестовый пример и действительно сэкономил время - person Peeyush; 22.04.2012

arrow_upward
2
arrow_downward

Помимо того, что в лучшем случае вы получаете чрезвычайно минимальное увеличение скорости, возможно, это даже не всегда может вести себя так, как вы хотите:

Источник:

Как: определяется скрытый был изменен в jQuery 1.3.2. Предполагается, что элемент скрыт, если он или любой из его родительских элементов не занимает места в документе. Видимость CSS не принимается во внимание (поэтому $(elem).css('visibility','hidden').is(':hidden') == false).

Проверка на видимость не является невероятно сложной, но, IMHO, даже этот отрывок показывает, что это не совсем тривиально. Хотя вы можете решить проблему проверки видимости, используя :hidden каждый раз, когда вы хотите убедиться, что этот код работает правильно, вы можете просто забыть о 5 миллисекундах, которые могут иметь шанс при сохранении и вместо этого сэкономьте время, потраченное на понимание кода и проверку документации каждый раз, когда может возникнуть проблема с этой областью.

Просто используйте старый добрый show(); я уверен, что если бы была причина сделать проверку заранее, я уверен, что старые добрые люди, которые делают jQuery, либо дали бы рекомендацию сделать это где-нибудь в документации, либо просто жестко запрограммировали проверку в show метод /: D

person Gordon Gustafson    schedule 22.04.2012

arrow_upward
0
arrow_downward

ваша проверка видимости может сэкономить некоторые усилия, потому что она не вызовет .show (), если он действительно не скрыт.

Так что я думаю пойти с этим

person Peeyush    schedule 22.04.2012