display:none означает, что элемент не отображается как часть DOM, поэтому он не загружается, пока свойство отображения не изменится на что-то еще.
visibility:hidden загружает элемент, но не показывает его.
Почему jQuery использует display:none для своих функций show/hide вместо переключения между visibility:hidden и visibility:visible?
Потому что в display:none элемент для всех целей перестает существовать - он не занимает никакого пространства.
Однако в visibility:hidden, как будто вы только что добавили opacity:0 к элементу - он занимает такое же пространство, но просто действует невидимым.
Создатели jQuery, вероятно, полагали, что первая будет лучше подходит для .hide().
visibility: hidden делает элемент невидимым, но не удаляет его из макета страницы. Он оставляет пустую коробку, в которой находился элемент. display: none удаляет его из макета, поэтому он не занимает места на странице, что обычно требуется людям, когда они что-то скрывают.
Видимость: hidden делает элемент невидимым таким образом, что он все еще использует пространство на странице. Дисплей: нет, элемент не имеет места и полностью исчезнет, но он все еще существует в DOM.
Видимость просто делает элемент невидимым, но на экране все равно будет занимать место.
Visibility:hidden просто сделать элемент невидимым, но он загружен в DOM, поэтому он потребляет время загрузки. Но Display:none не загружает элемент.