Видимость: скрытый vs display: none vs opacity: 0

Сейчас я начинаю анимационный проект. В проекте у меня будет более 40000 div и оживить их итеративно. Если какой-либо из div находится в пассивном состоянии (т.е. Он не оживляет хотя бы на 2 секунды), я не буду отображать их, чтобы увеличить производительность анимации.

Вопрос в том, какое свойство css является наиболее подходящим для этого?

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

И как я могу измерить производительность рендеринга, например, fps, использование gpu?

Ответ 1

Найденный ответ здесь ответит на ваш первый вопрос (скорее всего, display:none, поскольку пространство полностью разрушено).

~~К вашему второму вопросу инструменты, такие как это, вероятно, будут вам полезны.~~ Однако 40 000 звуков divs например, слишком много, и вы, вероятно, будете иметь лучшую производительность с использованием canvas или SVG (например, используя библиотеку KineticJS, поскольку это обрабатывает анимацию - преобразование, поворот, масштаб и т.д.) для вас.

Ответ 2

Все они отображают элемент невидимым, но отличаются тем, занимает ли он пространство и потребляет клики

+--------------------+----------------+-----------------+
| Property           | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0         |        ✓       |        ✓        |
+--------------------+----------------+-----------------+
| visibility: hidden |        ✓       |        ✗        |
+--------------------+----------------+-----------------+
| display: none      |        ✗       |        ✗        |
+--------------------+----------------+-----------------+

✓: yes
✗: no

И когда мы говорим, что он потребляет щелчок, это означает, что он также потребляет другие события указателя, такие как ondblclick, onmousedown, onmousemove и т.д.

По существу "видимость: нет" ведет себя как комбинация "непрозрачность: 0" и "указатель-события: нет".

Ответ 3

display:none, потому что divs выводятся из потока тогда, поэтому их положение не нужно вычислять.

Таким образом, 40000 divs звучат безумно. Вы рассматривали альтернативы, такие как холст HTML5 или SVG?

Ответ 4

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

Ответ 5

Perfomamce будет проблемой, если отображение: нет или видимость: скрытый используется, поскольку они запускают краску и макет в большинстве браузеров, что означает, что ваш браузер будет перерисовывать область просмотра каждый раз, когда эти два изменения, поэтому я рекомендую непрозрачность, но все же для этого числа divs будет по-прежнему неэффективным, как и ожидалось, вы можете попробовать webgl, используя библиотеку html-gl, которая отображает ваши divs в webgl check https://github.com/PixelsCommander/HTML-GL

Ответ 6

display:none: не занимает места, здесь нет элементов.

opacity:0: занимает пространство, вы его не видите, но можете щелкнуть по элементам за ним.

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