Много DOM. Скрытый vs display none

Ответ 1

Хорошо в каком-то смысле они нарисованы (но не совсем): браузер сохраняет место для них, поэтому он должен учитывать элементы при выделении видимых.

См. MDC visibility:hidden:

Коробка невидимая (полностью прозрачная, ничего не нарисована), но все же влияет на макет. Потомки элемента будут видны, если они имеют видимость: видимые (это не работает в IE до версии 7).

Если вместо этого указать display: none, браузер должен только заботиться о них и размещать их. Это не обязательно должно учитывать других.

В зависимости от вашего видимого/невидимого отношения и количества элементов это может иметь значение.

Ответ 2

Представьте себе картину.
У вас есть белый фон и начинайте рисовать яблоко с большим количеством деталей в течение одного часа, а затем вы полностью покрываете его другим слоем белой краски. Это visibility.

display:none походит на то, чтобы не рисовать его с самого начала. Конечно, это быстрее при первой загрузке.

Есть недостатки, когда вы используете display:none, хотя: когда вы переводите его обратно на block (или inline и т.д.), вам придется начать рисовать рисунок, но используя видимость, браузер просто царапает последний лак краски и обратно. Поэтому visibility быстрее в этом случае.

Но помните одно, когда вы используете visibility:hidden элемент сохраняет свое положение в потоке, поэтому элементы вокруг него не сдвинутся с места.

Если вы хотите, чтобы техническое объяснение проверялось беседа Дэвида Барона.

Ответ 3

Это довольно интересно. Таким образом, по существу visibility: hidden технически совпадает с opacity: 0?

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

Ответ 4

С visibility:hidden все они отображаются на экране, но они не отображаются пользователем. Вместо этого с display:none они не рисуются

Ответ 5

С visibility: hidden их размеры должны вычисляться, поэтому для них может быть зарезервировано соответствующее пространство. Они, фактически, все еще нарисованы.

Ответ 6

"браузер так же медленный, как если бы все они были нарисованы на экране."

Я думаю, что это медленно, потому что тег по-прежнему отображается, но не отображается на экране.

Отъезд this

Ответ 7

Потому что display: none фактически удаляет элементы из DOM. visibility: hidden просто делает их невидимыми, но они все еще там.

Вы можете заметить разницу, потому что поля ввода формы, которые имеют display: none, просто не будут включены в форму при ее отправке; поля ввода, которые имеют только набор visibility: hidden, будут по-прежнему присутствовать. По крайней мере, мой опыт - другие браузеры могут вести себя по-другому.

Ответ 8

Используя display:none, браузер не инициализирует эти элементы и не отображает контент. Это не тот случай, когда используется visibility:hidden, который инициализирует эти элементы, но просто скрывает их.

http://wiw.org/~frb/css-docs/display/display.html