Последствия сокрытия элементов с помощью видимости по сравнению с отображением

Чтобы упростить веб-приложение, необходимо изменить поведение виджетов меню и диалогов быть изменены. Изначально элементы меню были скрыты с помощью display: none; непрозрачность: 0;. Когда понадобилось меню, его стиль был изменен на display:block; а затем позиционируется с помощью утилиты позиционирования пользовательского интерфейса jQuery. Наконец, его непрозрачность была установлена ​​на 1.

Новый подход предполагает скрытие блоков div с помощью параметра Visibility: Hidden и их видимость с помощью Visibility: Visible. Это поднимает вопрос о последствиях и потенциальном влиянии этого изменения на производительность.

Последствия для производительности

Элементы с отображением: нет; не включаются в дерево рендеринга, что делает их более производительными. Напротив, элементы с видимостью: скрытыми остаются в дереве рендеринга, что потенциально влияет на производительность, если значительное их количество скрыто в любой момент времени.

Рекомендация

При отображении: никто; элементы работают лучше, влияние использования видимости: скрыто для ограниченного числа скрытых блоков div, вероятно, незначительно. Поэтому выбор между двумя подходами должен основываться на конкретной требуемой функциональности. Если требуется управление непрозрачностью или видимостью, следует использовать видимость: скрыто. В противном случае отобразите: нет; предпочтительнее для лучшей производительности.