Я хочу упростить работу в моем веб-приложении 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.
Каковы последствия моего нового подхода? Влияет ли это на производительность браузера?
Мне не известно о разнице в производительности между display:none и visibility:hidden - даже если есть всего за 10 элементов, это будет совершенно незначительно. Ваша главная проблема должна быть, как вы говорите, в том, хотите ли вы, чтобы элементы оставались в потоке документа, и в этом случае visibility является лучшим вариантом, поскольку он поддерживает коробчатую модель элемента.
display:none; Элементы не отображаются в дереве рендеринга, поэтому они будут лучше работать с номиналом.
Я сомневаюсь, что у вас будут какие-то реальные проблемы с производительностью. Если вам нужны opacity: 0 или visibility: hidden из-за их функциональности, просто используйте их. Если вам не нужны функции, используйте display: none;
Если вы переключаете между видимыми и невидимыми состояниями через javascript, тогда видимость: скрытый должен быть лучшим исполнителем. Увидев, что он всегда занимает одинаковое пространство как в видимом, так и в скрытом состояниях, он не будет вызывать переток элементов под ним каждый раз, когда вы заставляете его исчезать. Для отображения: none вы удаляете его из потока документа, а затем, когда вы устанавливаете его для отображения: блокируйте его, переверните его и нажмите все ниже этого элемента вниз, по существу выложив все это.
Но если вы делаете что-то вроде переключения видимых состояний на нажатия кнопок, вы действительно должны использовать то, что подходит вашим потребностям, а не то, что работает лучше, поскольку различия в производительности в таких случаях незначительны. Когда вы анимируете с dom примерно 20 раз в секунду, THEN вы можете беспокоиться о производительности видимости: hidden vs display: none.
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 - нет.
Я думаю, что это может быть как-то связано с этим вопросом: Свойства CSS: отображение и видимость
Я просто процитирую интересную часть:
элемент НИКОГДА не удаляется из иерархии DOM. При использовании дисплея все стили отображения уровня блока полностью "скрыты": нет, тогда как с видимостью: скрытый; сам элемент скрыт, но он все еще занимает визуальное пространство в DOM.
Таким образом, не должно быть никакой реальной разницы в производительности браузера, поскольку обе версии все еще находятся в иерархии DOM. Эти свойства влияют только на отображение элемента в отношении DOM.
Из личного опыта, который только что пробовал как на простой статической странице с формой, расположенной под "скрытой" кнопкой, visibility: hidden работает безупречно, тогда как display: none заставляет кнопки clickable слегка переходить на щелчок, как будто он пытается показать скрытая кнопка для миллисекунды.
Ну, видимость: никто до сих пор не использует пространство div. Таким образом, вы можете, возможно, пропустить позицию позиционирования, потому что ее место уже выделено (и тем самым получается более высокая производительность).
Но я как-то догадываюсь, что вам нужен ваш дисплей: никто не подходит для правильного выделения пространства при срабатывании события "show".