Различия в производительности между видимостью: скрытый и дисплей: нет

Question

Различия в производительности между видимостью: скрытый и дисплей: нет

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

ранее я создал div-окна моих меню при запуске и скрыл их с помощью display: none; opacity:0;. Когда мне понадобилось меню, я изменил его стиль на display:block затем используется утилита jQuery ui position для размещения div box (так как элементы с display:none не может быть расположен) и когда это было сделано, наконец, изменил свой стиль на opacity:1.

теперь я хочу просто скрыть их с visibility:hidden, и когда мне это нужно, я использую утилиту position, а затем меняю стиль на visibility:visible. Когда я начну использовать этот новый подход, у меня будет около 10 div-ящиков во время сеанса веб-приложения, которые скрыты, но занимают место, в отличие от предыдущих div-ящиков, скрытых с помощью display:none.

каковы последствия моего нового подхода? Влияет ли это на производительность браузера в любом отношении?

551 8

javascript html css performance

8 ответов:

Comments

Ничего не найдено.

chrisf · Accepted Answer · 2012-08-01 13:12:47

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

Esailija · Accepted Answer · 2012-08-01 13:26:54

display:none; элементы не в дереве отображения всех, так что они будут работать лучше по номиналу.

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

andwhyisit · Accepted Answer · 2012-09-28 16:54:04

Если вы переключаетесь между видимыми и невидимыми состояниями с помощью javascript, то visibility: hidden должен быть лучшим исполнителем. Видя, что он всегда занимает одинаковое количество пространства как в видимом, так и в скрытом состояниях, он не будет вызывать оплавление элементов под ним каждый раз, когда вы заставляете его исчезать. Для отображения: none вы удаляете его из потока документа, а затем, когда вы устанавливаете его для отображения: block, вы перепрофилируете его и нажимаете все ниже этого элемента вниз, по сути, выкладывая все это снова.

но если вы делаете что-то вроде переключения видимых состояний при нажатии кнопки, то вы действительно должны использовать то, что соответствует вашим потребностям, а не то, что работает лучше, так как различия в производительности в таких случаях незначительны. Когда вы анимируете с помощью dom примерно 20 раз в секунду, вы можете беспокоиться о производительности visibility:hidden vs display:none.

Marcelo De Zen · Accepted Answer · 2017-09-03 20:34:45

visibility: hidden не вызывает повторного потока на документе, в то время как display: none делает.

display: none делает HTML-движок полностью игнорировать элемент и его дочерние элементы. Движок не будет игнорировать элементы, отмеченные visibility: hidden, Он будет выполнять все вычисления для элемента и его дочерних элементов, исключение заключается в том, что элемент не будет отображаться на видовом экране.

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

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

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

изменить: Как указал @Juan,display: none это выбор, чтобы пойти, когда то, что вам нужно, чтобы добавить много элементов в дерево DOM. visibility: hidden вызовет повторный поток для каждого элемента добавлена в дерево, в то время как display: none не будет.

Soupedenuit · Accepted Answer · 2017-01-30 09:03:59

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

Levitator Imbalance · Accepted Answer · 2018-04-15 14:55:10

Ну, основная разница в производительности между display: block и visibility: hidden если у вас есть список, скажем, 100000 элементов visibility: hidden не спасет вас от зависания DOM, потому что он не удаляет элементы из DOM. visibility: hidden действует как opacity: 0 + pointer-events: none. display: none действует как Element.remove().

живой пример: https://jsfiddle.net/u2dou58r/10/

Najzero · Accepted Answer · 2012-08-01 13:14:36

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

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

Martin M. · Accepted Answer · 2017-05-23 14:54:06

Я думаю, что это может быть как-то связано с этим вопросом: свойства CSS: отображение против видимости

Я просто процитирую самое интересное:

элемент никогда не удаляется из иерархии DOM. Все "стили" отображения уровня блока полностью "скрыты" при использовании display:none, тогда как с visibility:hidden; сам элемент скрыт, но он все еще занимает визуальное пространство в DOM.

Так не должно быть реальная разница в производительности браузера, потому что обе версии все еще находятся в иерархии DOM. Эти свойства влияют только на как элемент отображается в отношении DOM.