Сейчас я начинаю анимационный проект. В проекте у меня будет более 40000 div и оживить их итеративно. Если какой-либо из div находится в пассивном состоянии (т.е. Он не оживляет хотя бы на 2 секунды), я не буду отображать их, чтобы увеличить производительность анимации.
Вопрос в том, какое свойство css является наиболее подходящим для этого?
.passive1{
display:none
}
.passive2{
visibility:hidden;
}
.passive3{
opacity:0;
}
И как я могу измерить производительность рендеринга, например, fps, использование gpu?
Найденный ответ здесь ответит на ваш первый вопрос (скорее всего, display:none, поскольку пространство полностью разрушено).
К вашему второму вопросу инструменты, такие как это, вероятно, будут вам полезны. Однако 40 000 звуков divs например, слишком много, и вы, вероятно, будете иметь лучшую производительность с использованием canvas или SVG (например, используя библиотеку KineticJS, поскольку это обрабатывает анимацию - преобразование, поворот, масштаб и т.д.) для вас.
Все они отображают элемент невидимым, но отличаются тем, занимает ли он пространство и потребляет клики
+--------------------+----------------+-----------------+
| Property | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0 | ✓ | ✓ |
+--------------------+----------------+-----------------+
| visibility: hidden | ✓ | ✗ |
+--------------------+----------------+-----------------+
| display: none | ✗ | ✗ |
+--------------------+----------------+-----------------+
✓: yes
✗: no
И когда мы говорим, что он потребляет щелчок, это означает, что он также потребляет другие события указателя, такие как ondblclick, onmousedown, onmousemove и т.д.
По существу "видимость: нет" ведет себя как комбинация "непрозрачность: 0" и "указатель-события: нет".
display:none, потому что divs выводятся из потока тогда, поэтому их положение не нужно вычислять.
Таким образом, 40000 divs звучат безумно. Вы рассматривали альтернативы, такие как холст HTML5 или SVG?
Дисплей: ни один не будет скрывать весь элемент и удалять его из пространства макета, тогда как видимость: скрытый скрывает элемент, но занимает то же место, что и раньше.
Непрозрачность может использоваться, если вы хотите создать прозрачность или эффект затухания.
Perfomamce будет проблемой, если отображение: нет или видимость: скрытый используется, поскольку они запускают краску и макет в большинстве браузеров, что означает, что ваш браузер будет перерисовывать область просмотра каждый раз, когда эти два изменения, поэтому я рекомендую непрозрачность, но все же для этого числа divs будет по-прежнему неэффективным, как и ожидалось, вы можете попробовать webgl, используя библиотеку html-gl, которая отображает ваши divs в webgl check https://github.com/PixelsCommander/HTML-GL
display:none: не занимает места, здесь нет элементов.
opacity:0: занимает пространство, вы его не видите, но можете щелкнуть по элементам за ним.
visibility:hidden: занимает пространство, и вы не можете щелкнуть элемент позади него.