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

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

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

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

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

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

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

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

Ответ 5

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

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

элемент НИКОГДА не удаляется из иерархии DOM. При использовании дисплея все стили отображения уровня блока полностью "скрыты": нет, тогда как с видимостью: скрытый; сам элемент скрыт, но он все еще занимает визуальное пространство в DOM.

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

Ответ 6

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

Ответ 7

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

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