Если у меня много DOM на странице, и я установил их для отображения: none, браузер по-прежнему реагирует быстро (прокрутка выполняется быстро, страница выглядит мгновенно).
Однако, если я видимость: скрытые элементы, браузер работает так же медленно, как если бы все они были нарисованы на экране.
Может кто-нибудь объяснить, почему это так?
Хорошо в каком-то смысле они нарисованы (но не совсем): браузер сохраняет место для них, поэтому он должен учитывать элементы при выделении видимых.
Коробка невидимая (полностью прозрачная, ничего не нарисована), но все же влияет на макет. Потомки элемента будут видны, если они имеют видимость: видимые (это не работает в IE до версии 7).
Если вместо этого указать display: none, браузер должен только заботиться о них и размещать их. Это не обязательно должно учитывать других.
В зависимости от вашего видимого/невидимого отношения и количества элементов это может иметь значение.
Представьте себе картину.
У вас есть белый фон и начинайте рисовать яблоко с большим количеством деталей в течение одного часа, а затем вы полностью покрываете его другим слоем белой краски.
Это visibility.
display:none походит на то, чтобы не рисовать его с самого начала. Конечно, это быстрее при первой загрузке.
Есть недостатки, когда вы используете display:none, хотя: когда вы переводите его обратно на block (или inline и т.д.), вам придется начать рисовать рисунок, но используя видимость, браузер просто царапает последний лак краски и обратно. Поэтому visibility быстрее в этом случае.
Но помните одно, когда вы используете visibility:hidden элемент сохраняет свое положение в потоке, поэтому элементы вокруг него не сдвинутся с места.
Если вы хотите, чтобы техническое объяснение проверялось беседа Дэвида Барона.
Это довольно интересно. Таким образом, по существу visibility: hidden технически совпадает с opacity: 0?
Я не создатель браузеров, но разве это не было бы огромным усилением производительности, если бы элементы, которые скрывали видимость, не были визуализированы или не окрашены, а вместо этого окрашены как прозрачный квадрат с размерами элемента? По крайней мере, в тех случаях, когда размеры были известны.
С visibility:hidden все они отображаются на экране, но они не отображаются пользователем.
Вместо этого с display:none они не рисуются
С visibility: hidden их размеры должны вычисляться, поэтому для них может быть зарезервировано соответствующее пространство. Они, фактически, все еще нарисованы.
"браузер так же медленный, как если бы все они были нарисованы на экране."
Я думаю, что это медленно, потому что тег по-прежнему отображается, но не отображается на экране.
Отъезд this
Потому что display: none фактически удаляет элементы из DOM. visibility: hidden просто делает их невидимыми, но они все еще там.
Вы можете заметить разницу, потому что поля ввода формы, которые имеют display: none, просто не будут включены в форму при ее отправке; поля ввода, которые имеют только набор visibility: hidden, будут по-прежнему присутствовать. По крайней мере, мой опыт - другие браузеры могут вести себя по-другому.
Используя display:none, браузер не инициализирует эти элементы и не отображает контент. Это не тот случай, когда используется visibility:hidden, который инициализирует эти элементы, но просто скрывает их.